A Progress bar indicates the current percentage for completeness of an operation or process.
jQueryUI provides an easy-to-use progress bar widget that we can use to let users know the percent of completeness of an operation. jQueryUI provides progressbar() method to create progress bars.
Below is an example which displays a progressbar on clicking "Start Progress" button.
Here we have used two main events of a progressbar:
1) change : This event is triggered
whenever the value of progress bar
changes.
2) complete : This event
is triggered when the progressbar
reaches the maximum value .
<html lang="en">
<head>
<meta charset="utf-8">
<title>Display Progressbar using jQuery</title>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
.ui-widget-header {
background: #cedc98;
border: 1px solid #DDDDDD;
color: #333333;
font-weight: bold;
}
.progress-label {
position: absolute;
left: 50%;
top: 40px;
font-weight: bold;
color : white;
text-shadow: 1px 1px 0 #fff;
}
.proressbar-class {
background: dustyblue;
}
</style>
<script>
$(document).ready(function(){
$("button").click(function(){
$("button").prop("disabled",true);
var progressbar = $( "#myprogressbar" );
progressLabel = $( ".progress-label" );
$( "#myprogressbar" ).progressbar({
value: false,
change: function() {
progressLabel.text(
progressbar.progressbar( "value" ) + "%" );
},
complete: function() {
progressLabel.text( "Loading Completed!" );
$("button").prop("disabled",false);
}
});
function progress() {
var val = progressbar.progressbar( "value" ) || 0;
progressbar.progressbar( "value", val + 5 );
if ( val < 99 ) {
setTimeout( progress, 100 );
}
}
$("#myprogressbar").css({ 'background': 'LightBlue' });
$("#myprogressbar > div").css({ 'background': 'Blue' });
progress();
});
});
</script>
</head>
<body>
<button>Start Progress</button>
<div id="myprogressbar" >
<div class="progress-label">
</div>
</div>
</body>
</html>
0 Comment(s)