Progress bar in HTML 5 and the HTML 4 equivalent

The HTML 5 progress tag represents the state of an event currently in progress.

Syntax HTML 5:

<progress value="" max=""></progress> 

The closing tag is mandatory.
A progress tag can contain other tags. It can not contain another progress tag.

Example, a tag to see if the browser supports HTML 5. Nothing is displayed unless, but the contents of the tag.

50%

HTML code:

<progress value="50%" max="200">50%</progress> 

The tag has two specific attributes, relating to the representation of the progression, but also inherited attributes directly relevant to its appearance. In the table below, specific attributes are in bold characters:

Progress bar in HTML 4

To create this graphic element, we use two nested layers and the progression is represented by the inner layer whose width is changed gradually in JavaScript.

The CSS code for this example is as follows:

width:300px;
padding:2px;
background-color:white;
border:1px solid black;
text-align:center

For the inner layer, the initial CSS code is:

width:0px;
background-color:green;

And the width is changed by this JavaScript code:

function prog(w)
{
   var x = document.getElementById("indicator");
   x.style.width=w;
}

As a demonstration, we can simulate a progress using the JavaScript function setInterval.

Demonstration and widget

Minimal HTML code

To display only the progress bar without the number.

<div id="progressbar">
    <div id="indicator"></div>
</div>

Full HTML code

To create a widget and display the current value.

<div id="pwidget">  
<div id="progressbar">
    <div id="indicator"></div>
</div>
<div id="progressnum">0</div>
</div>
<input type="button" name="Submit" value="Start the progression"
    onclick="itv = setInterval(prog, 100)" />
<input type="button" name="Submit" value="Stop"
    onclick="clearInterval(itv)" />

Full CSS code

#pwidget
{
  background-color:lightgray;
  width:254px;
  padding:2px;
  -moz-border-radius:3px;
  border-radius:3px;
  text-align:left;
  border:1px solid gray;	
}
#progressbar
{
  width:250px;
  padding:1px;
  background-color:white;
  border:1px solid black;
  height:28px;
}
#indicator
{
  width:0px;
  background-image:url("shaded-green.png");
  height:28px;
  margin:0;
}
#progressnum
{
  text-align:center;
  width:250px;
}

Javascript code

var maxprogress = 250;   // total to reach
var actualprogress = 0;  // current value
var itv = 0;  // id to setinterval
function prog()
{
  if(actualprogress >= maxprogress) 
  {
    clearInterval(itv);   	
    return;
  }	
  var progressnum = document.getElementById("progressnum");
  var indicator = document.getElementById("indicator");
  actualprogress += 1;	
  indicator.style.width=actualprogress + "px";
  progressnum.innerHTML = actualprogress;
  if(actualprogress == maxprogress) clearInterval(itv);   
}

To control the progress bar, we assign the global variable actualprogress, and put it to zero to reset the counter.

See also

• Window-like progress bar.