Javascript / Plugins / Scripts & Applications / Tools & Widgets / UI
3

jQuery Animated Bar Plugin: jqBar

by Muhammad Shahbaz Saleem · October 3, 2012

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>

View Demo

Download Source