Build Custom Responsive Progress Bars with ProgressBar.js

Progress bars are widely known by most users on the web. For developers, it’s often a complicated process to create a progress bar from scratch. But with ProgressBar.js you don’t have to!

This free open source library has no dependencies and supports all major browsers, including IE9+.

By default, you can use a simple bar, or you can select from a few basic shapes, such as:

• Single line
• Semicircle
• Full circle
• Square
• Triangle

You can also design your own custom shapes such as a heart, a cloud, or even the lettering of your website’s logo. Granted this will take some effort but the end result can be incredible.

The library works on SVG paths, so if you can build an outlined shape using SVG markup you can animate it with this progress bar library.

Animations can also include text or have custom start/stop patterns. The full API has more details with options/callbacks that you can peruse at your leisure.

ProgressBar.js also has a small installation guide where you can download & set up the script using Bower, npm, or the more simplified GitHub page.

And if you do build anything cool you can submit your code into the GitHub repo. The project’s creator, Kimmo Brunfeldt has an open GitHub issue where you can submit custom designs to be included in the library.

You can add animated progress bars to signup pages, upload fields, or to any web page as a preloader. The options are only limited by how detailed you’re willing to get.

For instance, I like the password strength meter demo since it serves a real purpose and benefits the user experience. This example comes packaged with the plugin, so you can copy this and modify it to your liking.

To see more examples, check out the ProgressBar.js homepage or take a peek at this fiddle demoing the heart animation.

Read Also:  How to Use and Style the HTML5 Meter Element for Visual Indicators