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.
We bring the latest tech, software news and stuff that matters. Stay in touch via Telegram, Twitter, YouTube, and Facebook and never miss an update!
