JavaScript responsive progress bar solution

Stable and slick solution of JavaScript responsive progress bars, based on animated SVG paths.

ProgressBar.js – JavaScript responsive progress bar solution

Use built-in shapes, or create our own paths! Customize the animations as we want! With ProgressBar.js we can create responsive and stylish progress bars for the web, in a really easy way.

Animations perform well also on mobile devices. It provides a few built‑in shapes like Line, Circle and SemiCircle, but we can also create custom shaped progress bars with any vector graphic editor!

It’s a lightweight solution, with support for all major browsers including IE9+.

Usage

We can install it via Bower or npm:

bower install progressbar.js

npm install progressbar.js

Then simply include dist/progressbar.js or dist/progressbar.min.js to our project.

Loading module is also simple via module loaders. If we aren’t using any module loader, progressbar.js exposes a global variable:

window.ProgressBar

Now let’s apply it to the container element:

var line = new ProgressBar.Line('#container');

ProgressBar.js uses shifty tweening library to animate path drawing, so the animation is done with JavaScript using requestAnimationFrame. Animating with JS gives more control over the animation and is supported across major browsers, e.g. IE does not support animating SVG properties with CSS transitions.

License: MIT

Demo & information:

https://kimmobrunfeldt.github.io/progressbar.js

See also:

ProBars – jQuery animated progress bars plugin

jQuery progress indicator for table of contents

Slim progress bar jQuery plugin – NProgress

A percentage loader jQuery plugin

react-progressbar.js

CSS: visually consistent html5 progress bar in all browsers

CSS3 Progress Bars

Enjoy!