W3cubDocs

/HTML

<progress>

Introduced in HTML5

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.
Permitted ARIA roles	None
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 zero 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: The minimum value is always 0 and the min attribute is not allowed for the progress element. You can use the -moz-orient CSS property to specify whether the progress bar should be rendered horizontally (the default) or vertically.

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:

Additional examples

See -moz-orient.

Specifications

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

Browser compatibility

Feature	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari
Basic support	6	Yes	6¹ ²	10	11	6
`max`	6	Yes	6	10	11	6
`value`	6	Yes	6	10	11	6

Feature	Android webview	Chrome for Android	Edge mobile	Firefox for Android	IE mobile	Opera Android	iOS Safari
Basic support	Yes	Yes	Yes	6¹ ²	No	11	7³
`max`	Yes	Yes	Yes	6	No	11	7
`value`	Yes	Yes	Yes	6	No	11	7

1. Prior to Firefox 14, the <progress> element was incorrectly classified as a form element, and therefore had a form attribute. This has been fixed.

2. 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.

3. Safari on iOS does not support indeterminate progress bars (they are rendered like 0%-completed progress bars).