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:

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

0

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

Forum

Problem: ProgressBar Tutorial

2011-07-18 18:46:13

matheus

Hi everyone, I was taking a look at the Progress bar tutorial (a great tutorial in fact). It worked nicely in all browsers, but when I tried to separate the code in files according to the programming language (css, js & html) it continues working well in IE 8.0 browser, but doesn't in Firefox or Opera. :/ I think the problem lies in my html code, since I am C programmer and just playing around with HTML for my own website it's possible that I making some mistakes. Anyone could take a look at the HTML and see if I am indexing the css and js files correctly? Here is the HTML code: pastebin.com/64Q2msiK The t.css and t.js only has their respective codes according to the language type. PS: Could anyone suggest a good html editor for debugging purposes? Thanks, Matheus.
2011-07-18 19:02:22

matheus

Hi again, I work a bit more on the code and now it's working :D Here the new html code: pastebin.com/fyjzRJPE But I still appreciate any suggest about a good html editor for debugging purposes! Thanks, Matheus.
2013-02-05 19:05:20

webmaster

See at this list of IDE and editors: HTML editors
©2010-2014 Scriptol.com