HTML <progress> (Progress Indicator) Tag

❮ Previous Reference Next ❯


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


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.


Version: HTML5

Standard Syntax

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

Browser Support



Attribute Value Description
max number Specifies how much work the task requires in total. (Default value is 1)
value number Specifies how much of the task has been completed.

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);

By Default CSS Value(s)


Related Tags:

<button>, <datalist>, <fieldset>, <form>, <input>, <label>, <legend>, <meter>, <optgroup>, <option>, <output>, <select> and <textarea>
❮ Previous Reference Next ❯