Introducing the jQuery easyBars plugin - Simple Progress Meters post


For part of a new project at work, I needed to be able to render a progress bar showing progress towards completion of an assignment. I had not yet made a proper jQuery plugin so I though it would be a good idea to release this so others could take advantage of it or possibly contribute back code if they have improvements.

The idea behind jQuery easyBars is that you can transform an element (probably a div) into a progress bar. The attributes of the bar are designed to be easily configured with intelligent defaults.

jQuery easyBars plugin mockup

For example, the progress bar will take on the width, height of the target element, but can be easily overridden in the easyBars options. I also allow for HTML5 data attributes to be used to control the appearance of the bars.

For a complete example please check out the jQuery easyBars demo page.

You can also download/fork the project on GitHub

  • Tags:
  • easybars
  • javascript
  • jquery
  • jquery plugins

explosive web programming MODERN CODE TACTICS

by James Fuller