The HTML <progress> element shows how much of a task is complete. Set value when the completed amount is known; omit it when the task is underway but its progress cannot be measured. Give the element an accessible name, and use <meter> for a measurement such as disk-space usage.
What the HTML progress element represents
The WHATWG HTML Standard defines it simply: “The progress element represents the completion progress of a task.” It is intended for work that is moving toward completion, such as uploading a file or loading content—not for displaying an arbitrary value or status.
A progress indicator can be determinate, when the amount completed is known, or indeterminate, when the activity is underway but the remaining work or duration is unknown.
How to create a determinate progress bar
Use the value attribute for the amount completed and max for the total amount of work:
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
<label for="upload">Upload progress</label>
<progress id="upload" max="100" value="70">70%</progress>This example indicates that 70 of 100 units are complete. The units can represent any consistent measure of the task; they do not have to be percentages. The browser expresses the completed amount as a fraction of the maximum.
The minimum is always zero. If max is omitted, the effective maximum is 1. A valid positive max sets a different maximum; an invalid or non-positive max falls back to 1. For clarity, specify max when your task naturally uses a total other than 1.
How to show indeterminate progress
Omit value when the activity is in progress but its completion amount is unknown:
<label for="loading">Loading content</label>
<progress id="loading"></progress>Do not use value="0" to mean “unknown.” Zero is a determinate value: it says that none of the task is complete. To change a determinate indicator to indeterminate with JavaScript, remove its value attribute:
document.querySelector("#upload").removeAttribute("value");To make it determinate again, set a valid value attribute appropriate to the task’s scale.
Choose between progress and meter
The distinction is the meaning of the information, not how the element looks. The HTML Standard distinguishes task completion from a scalar measurement within a known range.
Rank #4
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
| Element | Use it for | Example |
|---|---|---|
<progress> |
How much of a task is complete | File upload progress |
<meter> |
A measurement within a defined range | Disk-space usage |
If the value describes a resource level or measurement rather than work being completed, choose <meter>.
Make the progress indicator accessible
Give it an accessible name
Associate a visible <label> with the element using matching for and id values, or provide a name with aria-label or aria-labelledby. The text placed between the opening and closing <progress> tags is fallback content for older user agents; it does not provide the accessible name for assistive technology. See MDN’s progress element reference.
Best Value
Associate loading progress with the region being updated
When an indicator describes a region that is updating, connect the indicator to that region with aria-describedby and set aria-busy="true" on the region while the update is in progress. Remove the busy state when the update finishes. For example:
<div id="results" aria-busy="true" aria-describedby="results-progress">
<label for="results-progress">Loading search results</label>
<progress id="results-progress"></progress>
</div>When loading completes, update the region’s state:
document.querySelector("#results").setAttribute("aria-busy", "false");MDN documents this pattern in its progress element guidance.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.When to use a custom ARIA progress bar
The native element is the straightforward choice for ordinary task progress. A custom widget using role="progressbar" must maintain its range and current-value semantics, including updating the current value as the task advances. For an indeterminate custom progress bar, omit aria-valuenow; see MDN’s ARIA progressbar role reference.
Free tools Windows power users keep installed
One-click scans. No signup required.
Browser availability
MDN describes <progress> as widely available across modern browsers and available across browsers since July 2015. That broad guidance is not a guarantee for every legacy or embedded browser. Check a compatibility table against the specific browser and device versions your users need to support.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
