source

Progress

Linear and circular progress indicators with semantic intents, labels, stripes, and indeterminate mode.

Upload progress 65%

Size

Shape

Show Value

Striped

Animated

Intent

Loading syntax highlighting...

01 Examples

Custom value format

Override the value display with `formatValue` — typical for step counters, storage limits, or units.

Steps 3 of 5

Storage 750 MB

Loading syntax highlighting...

Profile completion

Track multi-field completion with a value label that drives user action.

Complete your profile 3 of 5 steps

Profile completion

Add a profile photo and verify your email to finish.

Loading syntax highlighting...

02 Customization

Upload Progress

Progress bar in a realistic file upload context.

project-assets.zip 12.4 MB / 18.6 MB

Loading syntax highlighting...

Dashboard Stats

Circular progress for key metrics.

92%

Uptime

67%

CPU

34%

Memory

Loading syntax highlighting...

03 Accessibility

ARIA Progressbar

Uses role="progressbar" with aria-valuenow, aria-valuemin, and aria-valuemax. In indeterminate mode, aria-valuenow is omitted to signal unknown progress.

Label

The label prop is set as aria-label on the progressbar element so screen readers announce the purpose of the indicator.

Reduced Motion

Indeterminate animation, striped animation, and circular spin are all suppressed when prefers-reduced-motion is enabled. The progress indicator remains visible in a static state.

04 API Reference

20 props

No matching properties

No matching properties

05 Installation

Import

Loading syntax highlighting...

llm.txt