At doodleblue, we are constantly on the lookout to give a developer’s view on latest tools that are potential time savers! This month we came across ProgressBar.js and here is our account on how helpful it is.
Here are snapshots of creative progress bars that we have worked on:
Progress bars are the info graphical elements in a webpage that every client wants in abundance. Little do they know that creating customized progress bars from scratch is a tedious task for developers.
With ProgressBar.js, this task has just been made easy. This free, lightweight open source library supports all major browsers including IE9+ and has no dependencies.
The shape template contains responsive and stylish progress bars for the web. The animations are shown really well on mobile devices. List of shapes provided are:
- Semi circle
More than this, one can create custom shapes using any vector graphic editor.
This is a code snippet released in the ProgressBar tutorial site to create a Line shaped progress bar and animating from 0% to 100%.
The library works on SVG paths, so if one can build an outlined shape using SVG markup, animation can be done with the library of the progress bar.
GitHub proves to be the perfect ground for installation and code submission, where ProgressBar.js scripts can be submitted in the GitHub repository for future use! Add your own designs in the open GitHub library.
Learn the basics at ProgressBar.js’s official page to know how it works!