Get started

ProgressBar.js is lightweight, MIT licensed and supports all major browsers including IE9+. See complete examples in full examples section.

Installing

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.