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
Newest
Oldest Most Voted
Inline Feedbacks
View all comments