Progress

Linear progress bar — set a 0–100 value for determinate fill, or omit for indeterminate.

Preview

Live

<div class="progress" role="progressbar"
  aria-valuemin="0" aria-valuemax="100" aria-valuenow="42"
  aria-label="Upload progress" style="--progress-value: 42%">
  <span class="progress__bar"></span>
</div>

<div class="progress progress--indeterminate" role="progressbar"
  aria-valuemin="0" aria-valuemax="100" aria-label="Loading">
  <span class="progress__bar"></span>
</div>

Variants

Determinate — 42%

Set --progress-value and aria-valuenow.

Determinate — 78%

Higher fill for near-complete work.

Indeterminate

.progress--indeterminate when duration is unknown.

Accessibility

  • Use role="progressbar" with aria-valuemin / aria-valuemax (0 / 100).
  • Determinate bars set aria-valuenow; indeterminate omit it (or leave unset).
  • Always provide an accessible name via aria-label or aria-labelledby.
  • Prefer Progress for known percentage work; use Spinner for brief inline waits.
  • Respect reduced motion — indeterminate falls back to a static bar.

API

HTML classes

Class Description
.progress Track root; set --progress-value (percent) for fill via scaleX.
.progress__bar Filled / animated bar segment.
.progress--indeterminate Shimmer animation when value is unknown.

React props

From src/core/Progress.tsx — extends HTMLAttributes<HTMLDivElement>.

Prop Type Default Description
value number — 0–100 determinate fill. Omit for indeterminate.
aria-label string — Accessible name for the progressbar.
className string — Merged onto the root.