Progress Bar

The HTML progress label 5 represents the status of the event being implemented.

HTML 5 syntax:

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

Closing tag is required.
Progress may contain other tags. It cannot contain another progress tag.

Example to see if your browser supports this HTML 5 tag. Nothing is displayed except the content of the tag.

50%

HTML code:

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

The tag has two native attributes associated with the progress view, as well as attributes inherited directly from its appearance. In the table below, certain attributes are highlighted in bold:

Attributes	Role and comment
standing each other	The value assigned to the value is the current percentage of progress to be displayed. No subdivisions are expected. We appoint it dynamically.
at most	This is the total value represented by the column and the maximum value that the attribute can have. It can be assigned to create a page or later.
width	Bandwidth, which depends on maximum value and progress detail.
height	Bar height.
vertical alignment	Alignment of the indicator in the graphics widget.
background-color	The default gray is the background color of the widget.
display	Default is inline-block.

Progress bar in HTML 4

Two nested layers will be used to create this graphic, and the progress will be represented by an inner layer whose width is gradually changing to JavaScript.

75%

The CSS code in this example looks like this:

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

For inner layer, initial CSS:

width:0px;
background-color:green;

And the width is changed by JavaScript code:

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

To demonstrate, you can simulate continuous progress using the JavaScript setInterval function.

Demo and widget

Minimal HTML

To display only the progress bar without a value.

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

Full HTML code

Creates a widget and displays 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="Lancer la progression"
    onclick="itv = setInterval(prog, 100)" />
<input type="button" name="Submit" value="Stopper"
    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 à atteindre
var actualprogress = 0;  // valeur courante
var itv = 0;  // id pour 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, a global updated variable is assigned and set to zero to reset the counter.

See also

Windows-style progress bar.