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:

The progress bar seen in OS X Mavericks

On Windows 7, the resulting progress looks like this:

progress-firefox.JPG

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

Attributes

Includes the Global Attributes.

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

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