HTML <progress> (Progress Indicator) Tag

<label for="loading">Loading progress:</label>
<progress id="loading" value="55" max="100"> 55% </progress>

Meaning

The <progress> element defines completion progress for a task.

It is often thought to represent the percentage from 0 to 100% of some task, such as loading to be completed, though the range and the unit value are arbitrary.

Notes:

• The <progress> element normally used in conjunction with the JavaScript to display the progress of a task. This element should not be used for representing a gauge. To represent a gauge, use the <meter> tag instead.
• Unlike the <meter> element, the minimum value is always 0, and the min attribute is not allowed for the <progress> element.

Version: HTML5

Standard Syntax

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

Browser Support

Status

Attributes

Global Attributes

<progress> element also supports the Global Attributes in HTML.

Event Attributes

<progrees> element also supports the Event Attributes in HTML.

More Examples

JavaScript example:

The following example show how to create animating progress bar:

<p>Progress: <progress id="bar" value="0" max="100"> 0% </progress></p>
<button onclick="countNumbers();">Start</button>

<script type="text/javascript">
var i = 0;
var progressBar = document.getElementById("bar");
function countNumbers(){
    if(i < 100){
        i = i + 1;
        progressBar.value = i;
    }
    // Wait for sometime before running this script again
    setTimeout("countNumbers()", 50);
}
</script>

By Default CSS Value(s)

None.