This page is Ready to Use

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.

progress

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 `` elements itself.
Permitted parents Any element that can contain phrasing content.
Tag omission A `` element must have both a start tag and an end tag.
The HTML `` 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](/html/elements/meter) element is available for such use cases.

The content of the progress element should represent the set min/max/value attributes in human readable form. This will be picked up by assistive technologies as well as act as a fallback for browsers not supporting the element.

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

Example of a basic progress element

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

View live example

Example of progress without a maximum

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

View live example

Styling options for the progress bar (vendor-specific)

progress {
  -webkit-appearance: none;
}

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

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

View live example

Progress element without value

<progress></progress>

View live example

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

HTML 5.1
W3C Working Draft
HTML 5
W3C Recommendation

See also

Other articles

Attributions