Introduced in HTML5
The HTML <progress> element represents the completion progress of a task, typically displayed as a progress bar.
| Content categories | Flow content, phrasing content, labelable content, palpable content. |
|---|---|
| Permitted content | Phrasing content, but there must be no <progress> element among its descendants. |
| Tag omission | None, both the starting and ending tag are mandatory. |
| Permitted parents | Any element that accepts phrasing content. |
| Permitted ARIA roles | None |
| DOM interface | HTMLProgressElement |
Attributes
This element includes the global attributes.
max- This attribute describes how much work the task indicated by the
progresselement requires. Themaxattribute, if present, must have a value greater than zero and be a valid floating point number. The default value is 1. value- This attribute specifies how much of the task that has been completed. It must be a valid floating point number between 0 and
max, or between 0 and 1 ifmaxis omitted. If there is novalueattribute, the progress bar is indeterminate; this indicates that an activity is ongoing with no indication of how long it is expected to take.
NOTE: The minimum value is always 0 and the min attribute is not allowed for the progress element. You can use the -moz-orient CSS property to specify whether the progress bar should be rendered horizontally (the default) or vertically.
NOTE: The :indeterminate pseudo-class can be used to match against indeterminate progress bars. To change the progress bar to indeterminate after giving it a value you must remove the value attribute with element.removeAttribute("value")
Examples
<progress value="70" max="100">70 %</progress>
Result
On Windows 7, the resulting progress looks like this:
Additional examples
See -moz-orient.
Specifications
| Specification | Status | Comment |
|---|---|---|
| WHATWG HTML Living Standard The definition of '<progress>' in that specification. |
Living Standard | |
| HTML5 The definition of '<progress>' in that specification. |
Recommendation | Initial definition |
Browser compatibility
| Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| Basic support | 6.0 | (Yes) | 6.0 (6.0) [1] [2] 14.0 (14.0) [2] |
10 | 11.0 | 5.2 |
| Feature | Android | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
| Basic support | (Yes) | (Yes) | 6.0 (6.0) [1] [2] 14.0 (14.0) [2] |
No support | 11.0 | 7 [3] |
[1] Prior to Gecko 14.0 (Firefox 14.0 / Thunderbird 14.0 / SeaMonkey 2.11), the <progress> element was incorrectly classified as a form element, and therefore had a form attribute. This has been fixed.
[2] Gecko provides the ::-moz-progress-bar pseudo-element, which lets you style the part of the interior of the progress bar representing the amount of work completed so far.
[3] Safari on iOS does not support indeterminate progress bars (they are rendered like 0%-completed progress bars).