HTML: progress

The <progress> element shows how far a task has advanced toward a known goal.

Determinate progress

<label for="upload-progress">Uploading</label>
<progress id="upload-progress" value="35" max="100">35%</progress>

The value is 35 out of a maximum of 100. The text inside the element is a fallback for browsers that do not render the progress bar.

Update it with JavaScript

const progress = document.querySelector('#upload-progress');
progress.value = 70;

Update the value as the task advances. Keep nearby text or an accessible label so users know what the progress represents.

Indeterminate progress

<progress aria-label="Loading">Loading</progress>

When value is omitted, the browser can show that work is happening but its completion percentage is unknown.

Common mistakes

• Do not use progress for a measurement such as disk usage; use meter for that.
• Keep value between zero and max.
• Do not communicate progress with color alone; provide a name and useful text.