Widely availableA strong default for loading, uploads, and multi-step work that has a meaningful completion state.
Data display Widely available

<progress>

The <progress> element represents task completion progress. It can show both determinate and indeterminate states with built-in semantics.

DataProgressStatus

Overview

The <progress> element represents task completion progress. It can show both determinate and indeterminate states with built-in semantics.

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
<progress>
6
12
6
6
18
7
HTML attribute
max

The max attribute defines the maximum value that is acceptable and valid for the input containing the attribute. If the value of the element is greater than this, the element fails validation. This value must be greater than or equal to the value of the min attribute. If the max attribute is present but is not specified or is invalid, no max value is…
6
12
6
6
18
7
value
6
12
6
6
18
7
DOM API
HTMLProgressElement

The HTMLProgressElement interface provides special properties and methods (beyond the regular HTMLElement interface it also has available to it by inheritance) for manipulating the layout and presentation of progress elements.
6
12
6
6
18
6
labels

The HTMLProgressElement.labels read-only property returns a NodeList of the label elements associated with the progress element.
6
18
56
6
18
6
max

The max property of the HTMLProgressElement interface represents the upper bound of the progress element's range.
6
12
6
6
18
6
position

The position read-only property of the HTMLProgressElement interface returns current progress of the progress element.
6
12
6
6
18
6
value

The value property of the HTMLProgressElement interface represents the current progress of the progress element.
6
12
6
6
18
6
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 2 item(s)
Implementation note
  • Before Firefox 14, the `<progress>` element was incorrectly classified as a form element, and therefore had a `form` attribute. This has been fixed.
  • Firefox provides the `::-moz-progress-bar` pseudo-element, which lets you style the part of the interior of the progress bar representing the amount of work completed so far.
Notes 1 item(s)
Implementation note
  • Safari on iOS does not support indeterminate progress bars (they are rendered like 0%-completed progress bars).

Syntax

HTML 
<label>Download progress:
  <progress value="70" max="100">70%</progress>
</label>

<!-- 不確定状態（value なし） -->
<progress>Loading...</progress>

Live demo

basic progressba-

Control. with Progress element in task. progress ba-display.value and max.

PreviewFullscreen

stepprogressdisplay

Represent. with Multiple. step. progress progress.

PreviewFullscreen

Meter and. Comparison

Progress(progress) and meter(value). Difference comparison.

PreviewFullscreen

Use cases

  • Loading workflows

    Indicate that a process is ongoing and, when possible, how far it has advanced.

  • Uploads and processing

    Show tangible progress for tasks where users benefit from knowing completion status.

Cautions

  • Do not fake precision if the actual progress is unknown; indeterminate state is often more honest.
  • Visual progress alone is not enough when timing or completion matters to the task.

Accessibility

  • Progress indicators should have clear labels and, when appropriate, complementary text that explains what is happening.

Related links

Powered by web-features