How to use HTML5 Progress bar

1 min


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 tag of HTML5. While defining, you can specify its max value and default value.

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.


Arindam

Creator and author of debugpoint.com. Connect with me via Telegram, Twitter, or send us an email.
Subscribe
Notify of
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

0 Comments
Inline Feedbacks
View all comments