Progress bar.js

With ProgressBar.js, it's easy to create responsive and stylish progress bars for the web. Animations perform well even on mobile devices. It provides a few built‑in shapes like Line, Circle and SemiCircle but you can also create custom shaped progress bars with any vector graphic editor.

ProgressBar.js is lightweight, MIT licensed and supports all major browsers including IE9+.

Usage

A simple code example of creating a Line shaped progress bar and animating it from 0% to 100%. See the install documentation for different installation options.

var ProgressBar = require('progressbar.js');

// Assuming we have an empty <div id="container"></div> in
// HTML
var bar = new ProgressBar.Line('#container', {easing: 'easeInOut'});
bar.animate(1);  // Value from 0.0 to 1.0

Examples

A few examples of using ProgressBar.js which can be quickly tested in JSFiddle. You can submit your own example suggestions to this issue.

Line
Circle
SemiCircle
Custom
Unsupported browser

Unfortunately this demo page doesn't work well with your browser. For best viewing experience, you should use IE10+, Chrome, Firefox or Opera browser.

ProgressBar.js supports all major browsers including IE9+ but ironically, this demo page doesn't. If you still want to view the broken page layout, press Ok.