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 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 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. |
Proposed Recommendation |
Browser compatibility
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Basic support | 6.0 | 6.0 (6.0) [1][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] | Not supported | 11.0 | Not supported |
Gecko notes
[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.
[2] 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.