How to use HTML5 Progress bar


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;}
$("#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>
<script src=""></script>

<progress value="22" max="100" id="pg1"></progress><span id="status"></span>
<p><strong>Note:</strong> The progress tag is not supported in Internet Explorer 9 and earlier versions.</p>

//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;}
$("#status").html(" "+incr+" %");

// Update the progress bar per 100 ms


Drop a comment if you find this tutorial useful.

You may also like...

Translate »