Progress

A bar showing how far a task has run, or that it is running.

Progress

A value out of 100. Without a visible label, name it with aria-label.

Code

<Progress value={33} attrs={{ "aria-label": "Profile complete" }} />

Usage

import { Progress } from "@elements/ui/progress";

<Progress value={33} />
<Progress value={state.uploaded} label="Upload progress" showValue />
<Progress value={null} label="Preparing" />
<Progress value={3} max={10} showValue getValueLabel={(v, max) => `${v} of ${max} files`} />

Examples

Moving on its own

Starts at 13 and moves to 66 half a second after mount; the fill slides there with transform.

Code

<Progress value={state.value} attrs={{ "aria-label": "Loading" }} />

// state.value starts at 13; 500ms after mount:
setTimeout(() => state.value = 66, 500);

Label and value

label names the bar; showValue prints the same text screen readers hear.

Upload progress

Code

<Progress value={56} label="Upload progress" showValue />

Controlled

Bound to state; the indicator moves with transform.

Volume

Code

<input type="range" min="0" max="100" value={state.value}>
<Progress value={state.value} label="Volume" showValue />

Indeterminate

value=null: no aria-valuenow, a sliding segment.

Preparing your export

Code

<Progress value={null} label="Preparing your export" />

Formatting

getValueLabel, Intl format options, a locale and a min that is not zero.

Files

Raised

Hochgeladen

From 100 to 200

Below min

Above max

Checkout

Code

<Progress value={3} max={10} label="Files" showValue
          getValueLabel={(v, max) => `${v} of ${max} files`} />
<Progress value={1250} max={5000} label="Raised" showValue
          format={{ style: "currency", currency: "USD", maximumFractionDigits: 0 }} />
<Progress value={1250} max={5000} label="Hochgeladen" showValue
          locale="de-DE" format={{ maximumFractionDigits: 0 }} />
<Progress value={150} min={100} max={200} label="From 100 to 200" showValue />

Sizes and colors

Three heights; --progress-color recolors the fill.

Done

Storage left

Code

<Progress size="sm" value={40} />
<Progress value={60} />
<Progress size="lg" value={80} />
<Progress class="success" value={100} label="Done" showValue />   /* .success { --progress-color: var(--success) } */

Upload

Running, indeterminate and complete in one bar; its box never changes.

Uploading report.pdf

Code

<Progress value={state.indeterminate ? null : state.upload} label="Uploading report.pdf" showValue />

RTL

The indicator fills from the inline start, so from the right under dir=rtl; the indeterminate bar slides the same way.

التحميل

جار المعالجة

Code

<div dir="rtl">
  <Progress value={33} label="التحميل" showValue />
  <Progress label="جار المعالجة" />
</div>

Reference Progress in the manual Every part, attribute, slot, key and data attribute.