Primitive

ProgressRing

Circular progress primitive for compact generated summaries and meters.

ProgressRing shows one bounded value when a circular readout is more scannable than a linear rail. Keep labels in the surrounding surface.
data
DOM renderImage render
ProgressRingDefault

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

Circular completion summary.
Render state

Density

Compact through editorial ring sizes.
Render state

Signals

Circular signal intents.
Render state

Public contract

The public prop table is generated from item metadata and schema-backed controls.
NameTypeDefaultDescription
valuenumber0Clamped 0-100 progress value.
intent'neutral' | 'sky' | 'terminal' | 'ultra' | 'danger'neutralRing intent.
density'compact' | 'comfortable' | 'editorial'comfortableRing scale.