ProgressIcon

Circular icon that shows discrete completion. Snaps to fixed steps (quarter / half / three-quarters / full) rather than animating continuously, and transitions to a filled circle with a checkmark at full. Has a separate loading state that spins.

Use for at-a-glance completion in dense UI — table cells, list items, dashboards — where a full progress bar would be too heavy.

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 snaps to the nearest discrete state automatically. percentage takes precedence over completion.

0%

20%

55%

85%

100%

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

Percentage → state mapping

Range	State
≤ 0	empty
0 < pct < 50	quarter
50 ≤ pct < 75	half
75 ≤ pct < 100	three-quarters
≥ 100	full

Any value above 0% shows at least a quarter fill — only an exact 100 triggers the full / checked state.

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). Maps to a discrete state per the table above. Takes precedence over completion.

Accessibility

The component renders an SVG with role="img" and a state-specific aria-label:

State	Label
empty	"No data"
quarter	"25% complete"
half	"50% complete"
three-quarters	"75% complete"
full	"Complete"
loading	"Loading"