ProgressIcon

Circular icon for at-a-glance completion in dense UI — table cells, list items, dashboards — where a full progress bar would be too heavy. Two ways to drive it:

• completion — snap to one of five discrete states (empty / quarter / half / three-quarters / full).
• percentage — render the actual percentage as a continuous fill.

Both modes share the filled-circle-with-checkmark animation at full and the separate loading state that spins.

States

empty

quarter

half

three-quarters

full

loading

<ProgressIcon completion="empty" class="w-4 h-4" />
<ProgressIcon completion="quarter" class="w-4 h-4" />
<ProgressIcon completion="half" class="w-4 h-4" />
<ProgressIcon completion="three-quarters" class="w-4 h-4" />
<ProgressIcon completion="full" class="w-4 h-4" />
<ProgressIcon completion="loading" class="w-4 h-4" />

From a percentage

Pass a percentage (0–100) and the component renders the actual fill — no snapping. percentage takes precedence over completion.

0%

1%

20%

55%

85%

99%

100%

<ProgressIcon :percentage="55" class="w-4 h-4" />

Visibility clamp

For any percentage strictly between 0 and 100, the visible fill is clamped to the range 15%–85%. This keeps a 1% value readably visible and a 99% value visibly short of complete — only exact 0 shows the empty/dotted ring, and only exact 100 triggers the full / checked state.

The aria-label always reports the rounded raw percentage ("99% complete"), not the clamped visual.

Muted

Set muted to render unfinished (partial) progress in the disabled gray instead of the cta blue — for contexts that are closed out but still show their state, like the steps of an already-completed workflow. Empty is gray either way; full and loading keep their colors.

default

muted

muted, full

<ProgressIcon :percentage="55" muted class="w-4 h-4" />

Sizes (via Tailwind)

The component takes no size prop. Resize with Tailwind utility classes — pass any w-*/h-* pair.

<ProgressIcon completion="three-quarters" class="w-4 h-4" />
<ProgressIcon completion="three-quarters" class="w-8 h-8" />

Props

Prop	Type	Default	Description
completion	'empty' | 'quarter' | 'half' | 'three-quarters' | 'full' | 'loading'	'empty'	Explicit state. Ignored when percentage is set.
percentage	number	—	Raw percentage (0–100). Renders as a continuous fill, clamped visually to [15%, 85%] for non-edge values. Takes precedence over completion.
muted	boolean	false	Render partial progress in the disabled gray instead of the cta blue. Empty, full, and loading are unaffected.

Accessibility

The component renders an SVG with role="img" and an aria-label that reflects the active state:

State	Label
empty (or percentage ≤ 0)	"No data"
quarter	"25% complete"
half	"50% complete"
three-quarters	"75% complete"
full (or percentage ≥ 100)	"Complete"
loading	"Loading"
percentage (between 0 and 100)	"{rounded}% complete" — e.g. "37% complete". Always reflects the raw value, not the visibility-clamped fill.