Barfiller.js
A simple jQuery plugin that gives you percentage-based animated bar filling...
View Demo | Buy Author a Beer at the Bar
How to Use
Set up some HTML like the following...
<div id="bar1" class="barfiller">
<span class="tip"></span>
<span class="fill" data-percentage="50"></span>
</div>And then call Barfiller on it...
$(document).ready(function(){
$('#bar1').barfiller();
});The data-percentage attribute is what sets the percentage that the bar animates to.
Options
Below are some options that you can pass in to Barfiller...
| Option | Value | Default Value | Description | Example |
|---|---|---|---|---|
| barColor | String (Hex value) | #16b597 | Sets the color of the animating fill bar | barColor: "#990000" |
| tooltip | Boolean | true | Sets whether or not to show the tooltip above the animating bar | tooltip: false |
| duration | Integer (in milliseconds) | 1000 | Sets the amount of time the fill animation takes in milliseconds | duration: 500 |
| animateOnResize | Boolean | true | Sets whether or not to redo the animation when the user resizes the window or switches device views | animateOnResize: false |
| symbol | String | % | Allows you to set the symbol used in tooltips | symbol: "" |