Primitive

Progress

Linear completion primitive with bounded and indeterminate states.

Progress shows bounded completion. Use ProgressRing for circular summaries and SegmentedProgress for step completion.
data
DOM renderImage render
ProgressDefault

Playground

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

Loading playground

Rendered matrix

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

Default

Linear progress.
Render state

Signals

Signal tone variants.
Render state

Indeterminate

Unknown-duration shuttle and lined states.
Render state

Public contract

The public prop table is generated from item metadata and schema-backed controls.
NameTypeDefaultDescription
valuenumber0Clamped 0-100 progress value. Optional for indeterminate states.
intent'neutral' | 'sky' | 'terminal' | 'ultra' | 'danger'neutralFill intent.
density'compact' | 'comfortable' | 'editorial'comfortableLinear rail thickness.
indeterminate'shuttle' | 'lined'-Unknown-duration progress treatment.