Fork me on GitHub
Post Format

jQuery Animated Bar Plugin: jqBar

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

Want this freebie? Enter your email and get it now!

Enter your email address to get the download link. Your email address will never be shared and only be used to send the download link.

Related Posts

  1. jQuery Plugin for On-demand Search Box: SeacrhMeme
  2. Stylish jQuery Accordion Plugin (FREE): Akordeon
  3. jQuery Broken Link Checker Plugin: jsLink
  4. jQuery Floating Social Share Plugin: floatShare
  5. jQuery Credit Card Validation Plugin: Smart Validate

3 comments

  1. Pingback: » 40+ Free and Fresh jQuery Plugins and Tutorials - Afghan Graffiti | Resource

  2. Pingback: jQuery Animated Bar Plugin: jqBar | TEKNQ

  3. Pingback: jQuery Animated Bar Plugin: jqBar | EGrappler - Web 2.0 BLOG | Web 2.0 BLOG

Leave a Reply

Required fields are marked *.


× seven = 56