Progress

Linear completion primitive with neutral, sky, and signal fills.

Progress shows bounded completion. Use indeterminate only when the duration is unknowable, and keep labels outside the bar.

Playground

Props in the URL.

Controls update query params directly, so every primitive state can be linked, rendered, and screenshotted deterministically.

Loading playground.

States

Every state maps to the same render route through the `state` query param.

Default

Linear progress.

Signals

Signal tone variants.

Indeterminate

Unknown-duration shuttle and lined states.

Segmented

Step-based completion.

68%

42%

81%

Ring

Circular progress composition.

Props

Name	Type	Default	Description
`value`	`number`	`0`	Clamped 0-100 progress value. Optional for indeterminate states.
`tone`	`'default' \| 'sky' \| 'terminal' \| 'ultra' \| 'error'`	`default`	Fill tone.
`size`	`'thin' \| 'medium' \| 'thick'`	`medium`	Linear rail thickness.
`indeterminate`	`'shuttle' \| 'lined'`	-	Unknown-duration progress treatment.
`segments`	`number`	-	SegmentedProgress segment count.
`ProgressRing.size`	`number`	-	ProgressRing diameter.
`ProgressRing.strokeWidth`	`number`	-	ProgressRing stroke width.