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
CSS: visually consistent html5 progress bar in all browsers
Enjoy!
