HTML <progress> Element
The HTML <progress> element represents the completion progress of a task, such as downloading a file, uploading data, or completing a multi-step process.
Syntax
<progress value="60" max="100">60%</progress>The <progress> element requires both an opening and closing tag. The value attribute represents the amount of the task that has been completed, while the max attribute defines the total amount required for completion.
Attributes
The <progress> element supports the global HTML attributes and the following element-specific attributes:
| Attribute | Description |
|---|---|
value |
Specifies how much of the task has been completed. The value must be between 0 and the value of the max attribute. |
max |
Specifies the total amount required to complete the task. The value must be greater than 0. |
Example
This example uses the <progress> element to show that a file upload is 70 percent complete.
Usage Notes
Use the <progress> element to represent the progress of a task that is currently being performed. Common examples include file uploads, downloads, installations, and multi-step operations.
When both value and max are provided, the progress is determinate because the browser can calculate how much of the task has been completed.
If the value attribute is omitted, the progress is indeterminate. This indicates that a task is in progress but its current level of completion is not known.
The default value of max is 1 when the attribute is omitted. The value must not be negative and must not be greater than max.
Do not use <progress> to display a measurement that is not related to the completion of a task. Use the <meter> element for measurements within a known range, such as disk usage or a rating.
Accessibility
Provide a meaningful label for a <progress> element so users can understand which task the progress indicator represents. A <label> element can be associated with the progress element using matching for and id attributes.
When progress changes dynamically, consider providing nearby text that communicates the current value when that information is important. Do not rely only on the visual appearance of the progress bar to communicate the status of a task.
Browser Support
Baseline: Widely available indicates a feature has been supported by core browsers for at least 30 months. At this stage, the feature is considered stable and safe for most websites to use without needing to worry about compatibility issues or fallbacks, as it is supported by the vast majority of users' devices and browser versions.
For detailed browser compatibility information, see Can I Use: HTML <progress> Element .
Related Elements
The <progress> element is closely related to the <meter> element for measurements within a known range and the <label> element used to provide an accessible label for the progress indicator.