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+.
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:
Now let’s apply it to the container element:
var line = new ProgressBar.Line('#container');