The WebPlatform project has been discontinued when the Stewards partnership agreement ended in September 2015. This site has been frozen, and the assets we have created will remain.


< html‎ | elements
Jump to: navigation, search


This article is Ready to Use.

W3C Recommendation


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.

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.


This element supports the HTML5 global attributes.

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.
How much work the task requires in total. This is optional, if it's not set then value is a percentage.


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



View live example


 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
HTML 5.1 W3C Working Draft
HTML 5 W3C Recommendation

See also

Other articles


This article contains content originally from external sources.

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