3 Demos of animated bar filling for progress or charts by jQuery: barfiller
Create animated progress bar by barfiller plug-in
The barfiller plug-in can be used for creating the animated bar fillings for the progress bar or horizontal bar charts. You just provide the percentage value in the data-percentage attribute and it will fill the bar accordingly.
The bars can be customized for color by using the provided option. The tooltips may also be displayed while you may also set the duration in milliseconds for filling the bar.
The progress or chart bar is responsive, so adjusts to the user’s screen even if a user resizes after opening the page. See the demos and get the complete code from the section below.
demo 1 demo 2
Developer’s page Download plug-in
Setup animated bar plug-in on your website
Include the barfiller’s style CSS file and jQuery library in the <head> section:
<link rel=”stylesheet” type=”text/css” href=”css/barfiller/style.css” />
<script src=”http://code.jquery.com/jquery-1.9.1.min.js” type=”text/javascript”></script>
Also, include the jquery.barfiller.js before the </body> tag and jQuery code:
<script src=”js/barfiller/jquery.barfiller.js” type=”text/javascript”></script>
Note: Adjust the CSS and JS files path according to your directory structure.
The HTML code
1 2 3 4 5 6 7 8 9 10 11 |
<div id="demo-bar" class="barfiller"> <div class="tipWrap"> <span class="tip"></span> </div> <span class="fill" data-percentage="65"></span> </div> |
The jQuery code for initiating the plug-in
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<script type="text/javascript"> $(document).ready(function(){ $('#demo-bar').barfiller(); }); </script> |
See the demos along with code below.
A demo of animated bar with default settings
The following demo shows two bars filling with different percentages by using default colors. Have a look by clicking the link or image below:
See online demo and code
The markup for this demo:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<p>A demo of animated progress bars</p> <div id="demo-bar" class="barfiller"> <div class="tipWrap"> <span class="tip"></span> </div> <span class="fill" data-percentage="65"></span> </div> <div id="demo-bar2" class="barfiller"> <div class="tipWrap"> <span class="tip"></span> </div> <span class="fill" data-percentage="30"></span> </div> |
The script:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<script type="text/javascript"> $(document).ready(function(){ $('#demo-bar').barfiller(); $('#demo-bar2').barfiller(); }); </script> |
A demo with different color bars
The default color of the bar is green as seen in above example. You may change the color and create various color bars by using the barColor option in the jQuery code.
See this demo where I have created five bars all with different color codes and percentages:
See online demo and code
The code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 |
<p>A demo of animated progress bars</p> <div id="demo-bar" class="barfiller"> <div class="tipWrap"> <span class="tip"></span> </div> <span class="fill" data-percentage="90"></span> </div> <div id="demo-bar2" class="barfiller"> <div class="tipWrap"> <span class="tip"></span> </div> <span class="fill" data-percentage="60"></span> </div> <div id="demo-bar3" class="barfiller"> <div class="tipWrap"> <span class="tip"></span> </div> <span class="fill" data-percentage="80"></span> </div> <div id="demo-bar4" class="barfiller"> <div class="tipWrap"> <span class="tip"></span> </div> <span class="fill" data-percentage="20"></span> </div> <div id="demo-bar5" class="barfiller"> <div class="tipWrap"> <span class="tip"></span> </div> <span class="fill" data-percentage="75"></span> </div> </div> <script src="js/barfiller/jquery.barfiller.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ $('#demo-bar').barfiller({ barColor: '#2E5C5C' }); $('#demo-bar2').barfiller({ barColor: '#800000' }); $('#demo-bar3').barfiller({ barColor: '#800080' }); $('#demo-bar4').barfiller({ barColor: '#400080' }); $('#demo-bar5').barfiller({ barColor: '#004040' }); }); </script> |
Adjusting the bar speed of filling
Not only you may change the colors but adjust the speed of filling of bars by using the duration option. The following demo is just like the above one except I have added duration option for each bar.
So, the first bar loads in one second, the second bar in two seconds and so on.
See online demo and code
The following script is used:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
$(document).ready(function(){ $('#demo-bar').barfiller({ barColor: '#2E5C5C', duration: 1000 }); $('#demo-bar2').barfiller({ barColor: '#800000', duration: 2000 }); $('#demo-bar3').barfiller({ barColor: '#800080', duration: 3000 }); $('#demo-bar4').barfiller({ barColor: '#400080', duration: 4000 }); $('#demo-bar5').barfiller({ barColor: '#00FF40', duration: 5000 }); }); |
The markup remains the same as in above example.
To learn more available options, visit the developer’s page in GitHub website.