Today’s freebie is a simple jQuery plugin for creating animated vertical and horizontal bars. The plugin is called jqBar. jqBar can be used in variety of situations where you want to present data with some visual effects. It helps you crate beautiful bar charts to represent skill set or can be used as a progress bar. Plugin is very light weight and can be completely customized.
- animationSpeed: 2000
- barLength: 200
- orientation: ‘h’ for horizontal orientation and ‘v’ for vertical.
- barWidth: 10
- barColor: ‘red’
- label: ‘&’,
- value: 100
In your HTML file add the following references in the head section.
- Add a reference to latest jQuery script
- Add a reference to jqbar.js file
- Add a reference to jqbar.css file
Now you just need to call the jqbar initializer function for any block element which you want to convert to animated bar.
Here is a complete example of using jqbar.