progress

< html‎ | elements
Jump to: navigation, search

progress

This article is Almost Ready.


W3C Candidate Recommendation

Summary

The HTML <progress> element represents the completion progress of a task.


Overview Table

DOM Interface HTMLProgressElement
Permitted contents Phrasing content, but may not contain any <progress> elements itself.
Permitted parents Any element that can contain phrasing content.
Tag omission A <progress> element must have both a start tag and an end tag.

The HTML <progress> element is a number in the range zero to a maximum, giving the fraction of work that has so far been completed. The progress element is not the correct element to use for something that is just a gauge, as opposed to task progress. For instance, indicating disk space usage using progress would be inappropriate. Instead, the meter element is available for such use cases.

Attributes

This element supports the HTML5 global attributes.


value
How much of the task has been completed. If max is not set, this should be a value between 0 and 1, if max is set, this should be a value between 0 and max.
max
How much work the task requires in total. This is optional, if it's not set then value is a percentage.


Compatibility

Do you think this data can be improved? You can ask to add by opening an issue or make a pull request.

Desktop

FeaturesChromeFirefoxInternet ExplorerOperaSafari
Basic support
6.0
Yes
?
Unknown
10
Yes
11.0
Yes
5.2
Yes

Mobile

FeaturesAndroidFirefox MobileIE MobileOpera MobileSafari Mobile
Basic support
?
Yes
6.0
Yes
?
none
11.0
Yes
?
none

Examples

View live exampleExample of a basic progress element

HTML

<progress value="165" max="200">165 of 200 finished</progress>

View live exampleExample of progress without a maximum

HTML

<progress value="0.72">72% done</progress>

View live exampleStyling options for the progress bar

CSS

progress {
  -webkit-appearance: none;
}

progress::-webkit-progress-bar {
  background-color: lightgray;
}

progress::-webkit-progress-value {
  background-color: lightgreen;
}

View live exampleProgress element without value

HTML

<progress></progress>

Usage

When the value attribute is omitted, the <progress> element becomes indeterminate, that is, it shows activity but not how much progress has actually been made.


Related specifications

Specification Status Related Changes
HTML5.1 Editor's Draft
WHATWG Living Standard

See also

Other articles

Attribution

This article contains content originally from external sources.

Portions of this content come from the Microsoft Developer Network: [Windows Internet Explorer API reference Article]