Progress Circle
ProgressCircle is a circular SVG progress ring. Useful for dashboards, stat cards, and compact progress indicators.
Basic usage
vue
<ProgressCircle :value="72" />Sizes
vue
<ProgressCircle :value="60" :size="48" />
<ProgressCircle :value="60" :size="64" />
<ProgressCircle :value="60" :size="96" />
<ProgressCircle :value="60" :size="128" />Custom colors
vue
<ProgressCircle :value="80" color="#10b981" />
<ProgressCircle :value="45" color="#f59e0b" />
<ProgressCircle :value="20" color="#ef4444" />Without center value
vue
<ProgressCircle :value="65" :show-value="false" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | — | Progress percentage (0–100) |
size | number | 64 | Diameter in pixels |
strokeWidth | number | 6 | Ring stroke width in pixels |
color | string | var(--color-primary) | Progress ring stroke color |
trackColor | string | #e5e7eb | Background ring color |
showValue | boolean | true | Show percentage text in center |
label | string | — | Accessible ARIA label |