HTML - <progress>
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.
Examples
Example1
<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.
Description
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 |
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] |
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).
See Also
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 |
License
© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/html/element/progress