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.

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

Compatibility

Desktop

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic Support 5.0
6.0
10
11.0
5.2

Mobile

Feature Android BlackBerry Chrome for mobile Firefox Mobile (Gecko) IE Mobile Opera Mobile Opera Mini Safari Mobile
Basic Support Unsupported
7.0
?
6.0
10
Unsupported
?
Unsupported

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]