Beautiful and responsive progress bars with animated SVG paths.
With ProgressBar.js, it's easy to create arbitrary shaped progress bars. This JavaScript library provides a few built‑in shapes like Line, Circle and Square but you can also create your own progress bars with Illustrator or any vector graphic editor.
ProgressBar.js is lightweight, MIT licensed and supports all major browsers including IE9+.
Install it with Bower:
bower install progressbar.jsOr NPM:
npm install progressbar.jsOr just by including progressbar.js or progressbar.min.js from latest tag to your project.
For detailed usage, see API documentation in GitHub.
Simple example of animating a built‑in Line progress bar. Line width can be set by specifying container's height with CSS.
Example of customizing the animation. We'll change the color of progress bar smoothly with animation. You could also animate any property like stroke width, fill opacity, fill color etc. See detailed explanation in API documentation.
Example of useless clock. Positioning text in the center of progress bar is a bit troublesome sometimes. See CSS for this example in GitHub.
Example of animating path inside a complex SVG scene. If you need to do more complicated animations, use SVG animation library like Snap.svg.