JavaScript responsive progress bar solution

DirectCode | November 26, 2016 | Graph, JavaScript, Libraries | No Comments

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+.

JavaScript responsive progress bar examples

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