HTML Tag Reference - HTML tag <progress>

The <progress> element indicates the completion of a task.

The value attribute defines the current progress. It is on a scale between zero and the value of the max attribute.

When the max attribute is omitted, the scale is between zero and 1. You express progress using floating-point numbers, such as 0.3 for 30%.

Browser compatibility

<progress> Yes 10.0 Yes Yes Yes

What's new in HTML5

The <progress> tag is new in HTML5.


Attribute Value Description
max number Set how much work the task requires in total
value number Set how much of the task has been completed

Global Attributes

The <progress> tag supports the Global Attributes in HTML.

Event Attributes

The <progress> tag supports the Event Attributes in HTML.

Default CSS Settings



A demo showing how to use <progress> tag.

        <progress id="myprogress" value="10" max="100"></progress> 
            <button type="button" value="30">30%</button> 
            <button type="button" value="60">60%</button> 
            <button type="button" value="90">90%</button> 
            var buttons = document.getElementsByTagName('BUTTON'); 
            var progress = document.getElementById('myprogress'); 
            for (var i = 0; i < buttons.length; i++) { 
                buttons[i].onclick = function(e) { 
                    progress.value =; 
                }; <!--  ww  w  . j av  a 2s  .c  o m-->

Click to view the demo