Display
ProgressRing
Circular determinate progress. Fills clockwise from 0 → 100% — for compact KPIs and sync indicators where a horizontal bar would be too noisy.
Examples
Sizes
<ProgressRing value={0.42} size="sm" />
<ProgressRing value={0.42} />
<ProgressRing value={0.42} size="lg" />
<ProgressRing value={0.42} size="xl" />With percentage label
78%
<ProgressRing value={0.78} size="xl">
{#snippet label()}78%{/snippet}
</ProgressRing>Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | 0 | Current value (0..max). |
max | number | 1 | Maximum value. |
size | 'sm' | 'md' | 'lg' | 'xl' | 'md' | Ring diameter (16/24/40/64). |
thickness | number | — | Override stroke width. |
label | Snippet | — | Optional centered label content. |
Install
CLI
npx @a3tai/mittsu add progress-ring