jQuery, CSS and HTML
<!DOCTYPE html>
<html>
<head>

	<link rel="stylesheet" type="text/css" href="css/barfiller/style.css" />
    <script src="https://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>

</head>
</head>
<body>

<h1>Barfiller</h1>

	<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>    
	
</div>
 
<script src="js/barfiller/jquery.barfiller.js" type="text/javascript"></script>
<script type="text/javascript">

$(document).ready(function(){

	$('#demo-bar').barfiller();
    $('#demo-bar2').barfiller();

});

</script>

  
</body>
</html>
Barfiller

A demo of animated progress bars