Progress bar tutorial in HTML

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:

Attributes	Purpose and comment
value	The number assigned to value is the percentage of the task performed to display. No unit is defined. The value is dynamically assigned.
max	This is the total value that isrepresented by the bar and the maximum value that may have the value attribute. It can be assigned at the creation of the page or later.
width	The width of the bar, which is a function of the maximum value and the granularity of the progression.
height	Height of the bar.
vertical-align	Alignment of the indicator in the graphics widget.
background-color	Gray by default, the background color of the widget.
display	The default is inline-block.

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.

75%

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

250

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.