Get started¶
ProgressBar.js is lightweight, MIT licensed and supports all major browsers including IE9+. See complete examples in full examples section.
Installing¶
- Using bower
bower install progressbar.js
- Using npm
npm install progressbar.js
- Including dist/progressbar.js or dist/progressbar.min.js from latest tag to your project.
Loading module¶
CommonJS
var ProgressBar = require('progressbar.js')
var line = new ProgressBar.Line('#container');
AMD
require.config({
paths: {'progressbar': '../bower_components/progressbar.js/dist/progressbar'}
});
define(['progressbar'], function(ProgressBar) {
var line = new ProgressBar.Line('#container');
});
Global variable
// If you aren't using any module loader, progressbar.js exposes
// global variable: window.ProgressBar
var line = new ProgressBar.Line('#container');
Files in dist/
folder are UMD modules built with Browserify's --standalone
switch. Read more about standalone Browserify builds.
How it works¶
Progress bars are just regular SVG paths. Read Jake Archibald's blog post to see how the path drawing works under the hood.
ProgressBar.js uses shifty tweening library to animate path drawing. So in other words, animation is done with JavaScript using requestAnimationFrame. Animating with JS gives more control over the animation and is supported across major browsers. For example IE does not support animating SVG properties with CSS transitions.
Migration guide¶
To upgrade from version x to y:
- Go to releases page
- Find the version x you are using
- Browse through release notes from x to y. API breaking releases are marked with
#breaking
. - Fix your current code to use new API
If you find this very tedious, please open a new issue.