Progress

A linear progress bar. Pass a `value` 0–100 for determinate progress, or omit it for an indeterminate loading loop. An optional label/value caption row, and a full accessible name wired straight into the native `progressbar` role.

Installation

npx stepwise-ui add progress

Live

import { Progress } from '@/components/stepwise/progress'

// animates the fill on value change - pass aria-label (or label) when
// nothing else on the page already says what's loading
<Progress value={progress} aria-label="Loading" />

Indeterminate

// omit value for a looping loader bar
<Progress aria-label="Loading" />

Label & value

`label` and `showValue` add a caption row above the track, matching Slider's own label row. Color isn't stuck to one prop value either - the storage bar below derives its own color from how full it is, the classic "turns yellow, then red" warning.

Uploading38%

Storage used50%

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

// color isn't fixed - derive it from the value for a storage-warning look
const color = pct >= 90 ? 'danger' : pct >= 70 ? 'warning' : 'success'
<Progress label="Storage used" showValue value={pct} color={color}
          formatValue={n => `${n}%`} />

Props

PropTypeDescription

value

number | undefined

0–100. Omit for indeterminate.

color

'brand' | 'success' | 'warning' | 'danger'

Bar color. Default brand.

size

number

Track thickness in px. Default 6.

label

string

Caption shown above the track, on the left.

showValue

boolean

Show the value on the right. Never shown while indeterminate. Default false.

formatValue

(v: number) => string

Format the displayed value. Default `${n}%`.

className