ping

Making Progress Bars has been made easy! – doodleblue shows you the .js way

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-control

 

Animated-progress-bars

 

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:

  • Line
  • Circle
  • Semi circle
  • Square
  • Triangle

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%.

Progress bar tutorial

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.

There is no limit to the animation as they can include text, have custom start and stop patterns. ProgressBar.js uses tweening library to animate path drawing – Animation is done with JavaScript using requestAnimationFrame.

The API has more details with options/callbacks. To install this, there is a small guide where the set up can be done using Bower, npm or GitHub!

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!

 

Author Bio

Tripti Chordia

Tripti Chordia

Tripti Chordia, is the CMO at doodleblue, a mobile and web app development company providing creative technology solutions to its clients. She completed her masters from Leeds in Advertising & Marketing and has worked at a few media houses prior to doodleblue.Tripti is responsible for online strategy and creative digital marketing campaigns for doodleblue. 


ABOUT doodleblue

doodleblue is a boutique creative technology solutions consulting firm. Our focus is to help entrepreneurs, start-ups & businesses succeed with their technology solutions. We love working on cutting edge technologies like Augmented Reality, OCR, Google glasses, and more in the mobility space.