🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

Barfiller.js is a jQuery plugin which uses CSS3 transitions to fill horizontal bars with percentage values you specify. .

progress-bar Bar-chart

Documentation

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: ""

You May Also Like