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 | {{no_tag_omission}} |
Permitted parent elements | Any element that accepts phrasing content. |
DOM interface | {{domxref("HTMLProgressElement")}} |
Attributes
This element includes the global attributes.
- {{ htmlattrdef("max") }}
- This attribute describes how much work the task indicated by the
progress
element requires. Themax
attribute, if present, must have a value greater than zero and be a valid floating point number. - {{ htmlattrdef("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 ifmax
is omitted. If there is novalue
attribute, 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 {{ cssxref("-moz-orient") }} property to specify whether the progress bar should be rendered horizontally (the default) or vertically. The {{ cssxref(":indeterminate") }} pseudo-class can be used to match against indeterminate progress bars.
Examples
<progress value="70" max="100">70 %</progress>
Result
{{ EmbedLiveSample("Examples", 200, 50) }}
On Mac OS X, the resulting progress looks like this:
On Windows 7, the resulting progress looks like this:
Additional examples
See {{ cssxref("-moz-orient") }}.
Specifications
Specification | Status | Comment |
---|---|---|
{{SpecName('HTML WHATWG', 'the-button-element.html#the-progress-element', '<progress>')}} | {{Spec2('HTML WHATWG')}} | |
{{SpecName('HTML5 W3C', 'forms.html#the-progress-element', '<progress>')}} | {{Spec2('HTML5 W3C')}} | Initial definition |
Browser compatibility
{{ CompatibilityTable() }}
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | 6.0 | {{ CompatGeckoMobile("6.0") }} [1] {{ CompatGeckoMobile("14.0")}} [2] |
10 | 11.0 | 5.2 |
Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | {{ CompatVersionUnknown }} | {{ CompatGeckoMobile("6.0") }} [1] {{ CompatGeckoMobile("14.0")}} [2] |
{{ CompatNo() }} | 11.0 | 7 [3] |
[1] Gecko provides the {{ cssxref("::-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 {{ geckoRelease("14.0") }}, the <progress>
element was incorrectly classified as a form element, and therefore had a form
attribute. This has been fixed.
[2] Gecko provides the {{ cssxref("::-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
- {{ cssxref("-moz-orient") }}
- {{ cssxref(":indeterminate") }}
- HTML5 Progress Element
{{ HTMLRef }}