Web/HTML/Element/progress

The HTML <progress> element displays an indicator showing the completion progress of a task, typically displayed as a progress bar.

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

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:

[[File:../../../../../../media.prod.mdn.mozit.cloud/attachments/2012/07/09/3566/6faca4dc5a60c0bea158ae2a61a67af0/progress-firefox.jpg|class=default internal|progress-firefox.JPG]]

Specifications

Specification	Status	Comment
HTML Living StandardThe definition of '<progress>' in that specification.	Living Standard
HTML5The definition of '<progress>' in that specification.	Recommendation	Initial definition

Browser compatibility

Update compatibility data on GitHub

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

Legend

Full support: Full support
See implementation notes.': See implementation notes.