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.



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

Overview Table

DOM Interface
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.


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

HTML 5.1
W3C Working Draft
W3C Recommendation

See also

Other articles