Home >Web >HTML reference – elements and attributes >progress – task progress

progress – task progress

<progress value="30" max="100">30%</progress>

A progress indicator of a task: uploading a file, processing, the completed part of a questionnaire. Without value the progress is indeterminate – the browser shows an animation that something is being worked on. The text inside is seen only by a browser without support.

Default display: display: inline-block
End tag: required
Content: phrasing content without another progress
Where it can be used: anywhere phrasing content is allowed
DOM interface: HTMLProgressElement

Attributes

value – how much is done (0 to max).
max – the total value (default 1).

Examples

Uploading a file and indeterminate progress:

<p><label for="upload">Uploading the photo</label><br>
<progress id="upload" value="65" max="100">65%</progress></p>
<p><label for="processing">Processing the order</label><br>
<progress id="processing"></progress></p>

The progress bar is drawn by the operating system – it looks different in every browser, which is why the example has no preview.

Accessibility

progress has the progressbar role and the screen reader reads the percentage. It needs a label (label or aria-label).

Things to watch out for

For measured values that are not progress (disk usage, a rating) there is meter.
The look is styled with pseudo-elements that differ between browsers (::-webkit-progress-value, ::-moz-progress-bar). The simplest way to change the color is accent-color.

Browser support

Baseline – widely available: works in all major browsers and has for a long time (since 2015 at the latest). Since version: Chrome 6, Firefox 6, Safari 6. As of October 2026 (MDN browser-compat-data).