<progress>: The Progress Indicator element
<progress> HTML element displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
|Content categories||Flow content, phrasing content, labelable content, palpable content.|
Phrasing content, but there must be no
|Tag omission||None, both the starting and ending tag are mandatory.|
|Permitted parents||Any element that accepts phrasing content.|
|Implicit ARIA role||
|Permitted ARIA roles||No
This element includes the global attributes.
This attribute describes how much work the task indicated by the
progresselement requires. The
maxattribute, if present, must have a value greater than
0and be a valid floating point number. The default value is
This attribute specifies how much of the task that has been completed. It must be a valid floating point number between
max, or between
maxis omitted. If there is no
valueattribute, 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
: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
<progress value="70" max="100">70 %</progress>
In most cases you should provide an accessible label when using
<progress>. While you can use the standard ARIA labelling attributes
aria-label as you would for any element with
role="progressbar", when using
<progress> you can alternatively use the
Note: Text placed between the element's tags is not an accessible label, it is only recommended as a fallback for old browsers that do not support this element.
<label>Uploading Document: <progress value="70" max="100">70 %</progress></label> <!-- OR --> <label for="progress-bar">Uploading Document</label> <progress id="progress-bar" value="70" max="100">70 %</progress>
Describing a particular region
<progress> element is describing the loading progress of a section of a page, use
aria-describedby to point to the status, and set
aria-busy="true" on the section that is being updated, removing the
aria-busy attribute when it has finished loading.
<div aria-busy="true" aria-describedby="progress-bar"> <!-- content is for this region is loading --> </div> <!-- ... --> <progress id="progress-bar" aria-label="Content loading…"></progress>
|HTML Standard |
BCD tables only load in the browser