Home » Tutorials » JavaScript » HTML5 Progress Bar

HTML5 Progress Bar

HTML5 Progress Bar

In the HTML5, there is an absolutely new element called “<progress>” that allow web developer to defines work-in-progress, used for representing the progress of a task. In this tutorial, we will introduce the basic usage of <progress> and used in conjunction with JavaScript to display the progress of a task or process as it is underway.Below is the example of HTML5 Progress Bar:


Your browser doesn’t support progress tag.

Supported Browsers

Before we start our tutorial, let’s check out the list of supported browsers that officially progress tag supported:

  • Firefox Nightly 6.0a1
  • Opera 11.10
  • Chrome 11.0.696.65

Basic Usage

Ok, let’s start to implement the HTML5 progress bar into our project. Please insert the following code in between your <body> and </body>:

<progress id="bar" value="0" max="100">
    <span id="fallback">
    <!-- Your fallback goes here -->
    </span>
  </progress>

Let’s look at the syntax carefully, there are 3 kind of attributes that you can specify to the progress tag, which is id, value and max.

  • id: Specifies the name of the element for JavaScript use.
  • value: Specifies the value of current progress.
  • max: Specifies the total value requires for a task.

Save your document, preview it on any supported browsers that mentioned above, and you should able to see a progress bar appear on your page. Yeah, simple enough right? We had just done a simple progress bar, now let’s make it dynamic.

Used In Conjunction With JavaScript

Our example will gradually added 10% of progression value to the progress bar every 1 second until it reach the maximum. Here is how our JavaScript should look:

<script>
window.onload = function() {
            
    var bar = document.getElementById("bar"), 
    fallback = document.getElementById("fallback"), 
    loaded = 0;
    
    var load = function() {
        loaded += 10;
        bar.value = loaded;
        
        /* The below will be visible if the progress tag is not supported */
        $(fallback).empty().append("HTML5 progress tag not supported: " + loaded + "% loaded");
        
        if(loaded == 100) {
            clearInterval(dummyLoad);
        }
    };
    
    var dummyLoad = setInterval(function() {
        load();
    } ,1000);        
}
</script>

Please notice that, the script above will run when you refresh the page and the timer will start counting and update the status of the progress bar until the current progress value equal to the max value of the progress bar. Besides, it is always a good practice to provide fallback content for your <progress> element, because it is still relatively new and isn’t implemented in some browsers, such as Internet Explorer.

Final Code

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML5 Progress Bar | onlyWebPro.com</title>
</head>
<body>
<p>
  <progress id="bar" value="0" max="100"> <span id="fallback">
    <!-- Your fallback goes here -->
    </span> </progress>
</p>
<script>
window.onload = function() {
            
    var bar = document.getElementById("bar"), 
    fallback = document.getElementById("fallback"), 
    loaded = 0;
    
    var load = function() {
        loaded += 10;
        bar.value = loaded;
        
        /* The below will be visible if the progress tag is not supported */
        $(fallback).empty().append("HTML5 progress tag not supported: " + loaded + "% loaded");
        
        if(loaded == 100) {
            clearInterval(dummyLoad);
        }
    };
    
    var dummyLoad = setInterval(function() {
        load();
    } ,1000);        
}
</script>
</body>
</html>


  • Jacks

    This is a very nice post.this is very helpful for me.nice post.thanks for sharing this….I only want to know how to change the progress bar color in place of green?.

    • Hi Jacks,

      Thanks for reading my post 🙂 I will try me best to answer your question. For changing the appearance of the Progress Bar, you can change it using CSS, background property, just to name a few examples:

      /* IE10 */
      progress {
      color: black;
      }

      /* Firefox */
      progress::-moz-progress-bar {
      background: black;
      }

      /* Chrome */
      progress::-webkit-progress-value {
      background: black;
      }

      Hope this is can solve your problem. Stay in touch with us!

      Cheers! 🙂

      • mahassen

        hello , i wanted to create a progress bar in a web page by PHP5 over the MVC model , but it should work on dates , In fact i have a monitoring for the hdd’s wiping, if i insert a disk in a date t1, t1 will be saved on the database and the wiping duration w_d will be saved on the database too ..so after the W_d time the progress bar must be in 100%

  • Jeric

    hi what is the meaning of the fallback there?

    • Hi Jeric,

      The span with ‘fallback’ id here is means to provide the message for visitors who are using the old browser which does not support HTML5 progress tag.

  • Madhu

    Hey…. Thanks for the code.. this really helped me out a lot…

    • Hi Madhu,

      You’re welcome! For upcoming tutorials, please follow us on either facebook, twitter or google+ 🙂 pages.

  • hitteshahuja

    good one buddy!

  • Stycus

    Hi,

    Thanks for your code, it was just what i try to do.

    Now i’ll try to stop the bar during is loading, with this code:

    f(loaded == 20) {

    But this not work, have an idea?

Android, iOS Development Tutorials