How to Use the progress Element

The HTML progress element represents how much of a task has been completed, such as uploading a file or processing data.

The short answer

Minimal example

<label for="upload-progress">Upload progress</label>
<progress id="upload-progress" max="100" value="65">65%</progress>

value="65" is the completed amount and max="100" is the total. HTML does not define the unit, so this example uses a percentage.

Try it

Moving the slider lets JavaScript update progress.value. The progress element does not perform the task; the application calculates and updates the actual progress.

value and max

max is the total amount of work and value is the completed amount. If max is omitted, the default maximum is 1. For example, a fraction between 0 and 1 can represent progress.

<progress max="1" value="0.5">50%</progress>
<progress max="10" value="3">3 / 10</progress>

value is specified from 0 through max. Negative or invalid numbers do not become meaningful progress values just because they were written in markup.

Show an indeterminate state

<label for="waiting-progress">Waiting for the server</label>
<progress id="waiting-progress">Processing</progress>

When the value attribute is omitted, the task is active but its amount of remaining work is unknown. This differs from value="0", which is a determinate task with no completed work yet.

progress, meter, and output

• progress — how much of a task is complete.
• meter — a measurement within a known range, such as disk usage or temperature.
• output — the result of a calculation or user action.

Choose the element by meaning, not by appearance. Is it task completion, a measurement, or a result?

Make it clear and understandable

• Use a label or another clear name to explain what is progressing.
• If users need to see a number or unit, include it in the fallback text or nearby explanation.
• When a region of the page is loading, design the relationship between that region and its progress indicator.
• Provide useful meaning and an initial state even if JavaScript fails.

Common mistakes

• Creating a visual bar without updating its value as the task changes.
• Choosing an arbitrary max when the total amount is unknown.
• Using progress for a measurement such as disk usage.
• Showing a number without explaining which task it represents.

Continue in Atlas

For categories, content model, determinate and indeterminate states, value resolution, HTMLProgressElement, and accessibility API mappings, see the progress element in Yugien Atlas. For labels, see the label element; for calculation results, see the output element.