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.
jqBar Featuers
- animationSpeed: 2000
- barLength: 200
- orientation: ‘h’ for horizontal orientation and ‘v’ for vertical.
- barWidth: 10
- barColor: ‘red’
- label: ‘&’,
- value: 100
Using jqBar
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.
<html>
<head>
<title>jQuery Animated Bar Plugin</title>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jqbar.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/jqbar.css" />
<script type="text/javascript">
$(document).ready(function () {
$('#bar-1').jqbar({ label: 'Label', value: 90, barColor: '#D64747', orientation: 'h', barWidth: 20 });
});
</script>
</head>
<body>
<div id="bar-1">
</div>
</body>
</html>
Pingback: » 40+ Free and Fresh jQuery Plugins and Tutorials - Afghan Graffiti | Resource
Pingback: jQuery Animated Bar Plugin: jqBar | TEKNQ
Pingback: jQuery Animated Bar Plugin: jqBar | EGrappler - Web 2.0 BLOG | Web 2.0 BLOG