Responsive Progress Bar with SVG Path Animations – Progressbar.js

Progress bar is a very useful component for web & mobile design that provides an obvious way to indicate the loading progress for page loading, image loading, ajax requests, etc. In this post I’d like to introduce a new progress bar JS library called  Progressbar.js which helps you create beautiful, responsive progress bars with awesome SVG path animations.

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. IE does not support animating SVG properties.


Click the GIF below to see how it works:


Leave a Reply