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, split by blast radius: the hooks that belong to this component, then the shared and system tokens it consumes alongside everything else. 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.

Type roles it names

This component does not set a size, weight, face or tracking of its own — it names a composite, and the composite carries all five. A composite is a class rather than a token, so none of it appears in the tables below; re-theme text by re-pointing the token family, not by editing the component.

Wired to this component

No other component reads these — re-point them and esa-progress-bar is the only thing that moves.

Shared tokens it reads

Owned by a family or by the semantic layer. Still overridable — but scope the override (esa-foo { --form-border-color: … }) unless you mean to move everything that reads it. Reach says what else that is.