ProgressBar.js

Beautiful and responsive progress bars with animated SVG paths.

With animated SVG paths, it's easy to create arbitrary shaped progress bars. ProgressBar.js provides a few built‑in shapes like Circle and Square. You can also create your own progress bars with Illustrator or any vector graphic editor.

For detailed usage, see API documentation in GitHub.

Examples

Circle

Simple example of animating a built‑in Circle progress bar.

Run

Custom shaped path

Example of animating path inside a complex SVG scene. If you need to do more complicated animations, use SVG animation library like Snap.svg.

Run