<progress>: The Progress Indicator element

The HTML <progress> element displays an indicator showing the completion progress of a task, typically displayed as a progress bar.

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

Attributes

This element includes the global attributes.

max

This attribute describes how much work the task indicated by the progress element requires. The max attribute, if present, must have a value greater than zero and be a valid floating point number. The default value is 1.

value

This attribute specifies how much of the task that has been completed. It must be a valid floating point number between 0 and max, or between 0 and 1 if max is omitted. If there is no value attribute, the progress bar is indeterminate; this indicates that an activity is ongoing with no indication of how long it is expected to take.

Examples

<progress value="70" max="100">70 %</progress>

Result

On Windows 7, the resulting progress looks like this:

Additional examples

See -moz-orient.

Specifications

Browser compatibility

See also

• <meter>
• :indeterminate
• -moz-orient
• ::-moz-progress-bar
• ::-ms-fill
• ::-webkit-progress-bar
• ::-webkit-progress-value
• ::-webkit-progress-inner-element