<progress>: The Progress Indicator element - HTML: HyperText Markup Language 编辑

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.

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 0 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.

Note: Unlike the <meter> element, the minimum value is always 0, and the min attribute is not allowed for the <progress> element.

Note: The :indeterminate pseudo-class can be used to match against indeterminate progress bars. To change the progress bar to indeterminate after giving it a value you must remove the value attribute with element.removeAttribute('value').

Examples

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

Result

On Windows 7, the resulting progress looks like this:

Specifications

Browser compatibility

BCD tables only load in the browser

See also

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