Animate progressbar

by ConstantinV

HTML

<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<div id="progressbar">
    <div class="progress-label">
            Progressbar
    </div>
</div>

CSS

.ui-progressbar .ui-progressbar-value {
			background-image: url(http://bit.ly/13wIQuG);
		}
		
		body {
			font-family: "Trebuchet MS", "Helvetica", "Arial",  "Verdana", "sans-serif";
			font-size: 62.5%;
		}

		.progress-label {
            position: absolute;     
            font-weight: bold;
            text-shadow: 1px 1px 0 #fff;
         }

		#progressbar {
			width: 200px;   
		}

JavaScript

$(document).ready(function(){
    
    $('#progressbar').progressbar({value: 1});  
     
     $( "#progressbar" ).mouseover(function() {      
			$("#progressbar .ui-progressbar-value").animate({width: 200}, {duration: 3000},'slow')   
		});
	   
	    $( "#progressbar" ).mouseout(function() {
			$('#progressbar').progressbar({value: 0});
         
		});
     
     
     });