HTML5 comes with progress bar tag which is useful to many occasions. Progress bar element is used in multiple occasions when a status of a certain task, activity is needs to be shown on a web page without server interaction. This tutorial will show a very basic implementation of html5 progress bar operation – defining, setting its value so that a progress can be shown.
Defining a progress bar
To define a progress bar, you need to use
Increase and Reset
Now, we would use a simple increment logic in JQuery to increase the progress and when its reaches the maximum value, reset its value and start over. Lets define a function.
function updateProgress(){
incr = incr +1;
if (incr>max) { incr=1;}
$("#pg1").val(incr);
$("#status").html(" "+incr+" %");
}
You can set the progress bar current value using val(value) method.
So, we are done working on the logics.
Here is a demo of this tutorial: View Demo
Download the code here: Download Code
Complete Code:
[code lang=”js” htmlscript=”true”]
<!DOCTYPE html>
<html>
<HEAD>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</HEAD>
<body>
<div>
<progress value="22" max="100" id="pg1"></progress><span id="status"></span>
</div>
<p><strong>Note:</strong> The progress tag is not supported in Internet Explorer 9 and earlier versions.</p>
</body>
<script>
$(document).ready(function(){
//Define a max value 100
var max=100;
var incr=1;
// Call this function to increment the progress bar value
function updateProgress(){
incr = incr +1;
if (incr>max) { incr=1;}
$("#pg1").val(incr);
$("#status").html(" "+incr+" %");
}
// Update the progress bar per 100 ms
setInterval(updateProgress,100);
});
</script>
</html>
[/code]
Drop a comment if you find this tutorial useful.
