Jquery UI Progress Bar
HTML
<script src="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css""></script>
<div id="progressbar">
<div class="progress-label">Loading...</div>
</div>
<button id="button"> Click Me! </button>
CSS
.progress-label {
float: left;
margin-left: 50%;
margin-top: 5px;
font-weight: bold;
text-shadow: 1px 1px 0 #fff;
}
JavaScript
$(function() {
var progressbar = $( "#progressbar" ),
progressLabel = $( ".progress-label" );
progressbar.progressbar({
value: true,
change: function() {
progressLabel.text( progressbar.progressbar( "value" ) + "%" );
},
complete: function() {
progressLabel.text( "Complete!" );
setTimeout("$('#dialog').dialog('close')",3000);
}
});
function progress() {
var val = progressbar.progressbar( "value" );
progressbar.progressbar( "value", val + 2 );
if ( val < 99 ) {
setTimeout( progress, 80 );
}
}
setTimeout( progress, 2000 );
$('#button').click(function(){
alert("kkk");
$('#progressbar').progressbar('option', 'value', 0);
progress();
});
});