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, 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] 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] 14.0 (14.0) [2] |
Not supported | 11.0 | 7 [3] |
[1] 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.
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).