Progress Bar

Preview

<ProgressBar value={68} label="Uploading" showValue={true} />

Variants

<ProgressBar value={60} variant="primary" />
<ProgressBar value={60} variant="success" />
<ProgressBar value={60} variant="warning" />
<ProgressBar value={60} variant="danger" />

Sizes

<ProgressBar value={50} size="xs" />
<ProgressBar value={50} size="sm" />
<ProgressBar value={50} size="md" />
<ProgressBar value={50} size="lg" />

Label & indeterminate

Add a label (and showValue for the percentage) above the track. Indeterminate mode runs a looping translate animation when the completion is unknown.

<ProgressBar value={40} label="Processing" showValue={true} variant="warning" />
<ProgressBar mode="indeterminate" label="Loading…" />

API

Accessibility

• Renders role="progressbar" with aria-valuemin="0" and aria-valuemax="100".
• aria-valuenow is set in determinate mode and omitted while indeterminate.
• aria-label falls back to "Progress" when no label is provided.

Theming surface

Every public token this component reads, extracted from its source at build time. The Resolves to column walks each token's real lineage — component → semantic → primitive → raw value — so you can see exactly where re-pointing it lands. A spoke re-skins by overriding these in its theme-<slug>.css; component internals are never edited. No hook for what you need? File it with /request-lego.