Introduced in HTML5
Summary
The HTML <progress> Element is used to view the completion progress of a task. While the specifics of how it's displayed is left up to the browser developer, it's typically displayed as a progress bar. Javascript can be used to manipulate the value of 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 parent elements | Any element that accepts phrasing content. |
| 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. 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.
You can use the -moz-orient property to specify whether the progress bar should be rendered horizontally (the default) or vertically. The :indeterminate pseudo-class can be used to match against indeterminate progress bars.
Examples
<progress value="70" max="100">70 %</progress>
Result
On Mac OS X, the resulting progress looks like this:
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 | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Basic support | 6.0 | 6.0 (6.0) [1] [2] 14.0 (14.0) [2] |
10 | 11.0 | 5.2 |
| Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Basic support | (Yes) | 6.0 (6.0) [1] [2] 14.0 (14.0) [2] |
Not supported | 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).