W3cubDocs

/HTML

<progress>

The <progress> displays an indicator showing the completion progress of a task, typically displayed as a 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 parents Any element that accepts phrasing content.
Implicit ARIA role progressbar
Permitted ARIA roles No role permitted
DOM interface HTMLProgressElement

Attributes

This element includes the global attributes.

max
This attribute describes how much work the task indicated by the progress element requires. The max attribute, if present, must have a value greater than 0 and be a valid floating point number. The default value is 1.
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 if max is omitted. If there is no value attribute, the progress bar is indeterminate; this indicates that an activity is ongoing with no indication of how long it is expected to take.

Note: Unlike the <meter> element, the minimum value is always 0, and the min attribute is not allowed for the <progress> element.

Note: The :indeterminate pseudo-class can be used to match against indeterminate progress bars. To change the progress bar to indeterminate after giving it a value you must remove the value attribute with element.removeAttribute('value').

Examples

<progress value="70" max="100">70 %</progress>

Result

On Windows 7, the resulting progress looks like this:

progress-firefox.JPG

Specifications

Browser compatibilityUpdate compatibility data on GitHub

Desktop
Chrome Edge Firefox Internet Explorer Opera Safari
progress 6 12 6
6
Prior to Firefox 14, the <progress> element was incorrectly classified as a form element, and therefore had a form attribute. This has been fixed.
Firefox 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.
10 11 6
max 6 12 6 10 11 6
value 6 12 6 10 11 6
Mobile
Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
progress Yes Yes 6
6
Prior to Firefox 14, the <progress> element was incorrectly classified as a form element, and therefore had a form attribute. This has been fixed.
Firefox 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.
11 7
7
Safari on iOS does not support indeterminate progress bars (they are rendered like 0%-completed progress bars).
Yes
max Yes Yes 6 11 7 Yes
value Yes Yes 6 11 7 Yes

See also

© 2005–2020 Mozilla and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress