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;}
$("#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.

SEE ALSO:   How to Install Fonts in Ubuntu to be used in Gimp, LibreOffice

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!

Join our Telegram channel and stay informed on the move.

Also Read

Like it? Share with your friends!


Creator of All time Linux user and open-source supporter. Connect with me via Telegram, Twitter, LinkedIn, or send us an email.
Notify of

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

Inline Feedbacks
View all comments
Would love your thoughts, please comment.x