3.3 KiB
Get started
ProgressBar.js is lightweight, MIT licensed and supports all major browsers including IE9+. See complete examples in full examples section.
{install} 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.
{migrations} 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.