Progress Ring
Concentric multi-ring progress indicator inspired by Apple Watch activity rings.
Preview
Import
import { ProgressRing } from "@sigil-ui/components";Usage
<ProgressRing
tracks={[
{ label: "Move", value: 78, max: 100 },
{ label: "Exercise", value: 45, max: 100 },
{ label: "Stand", value: 92, max: 100 },
]}
thickness={8}
gap={4}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
tracks | ProgressRingTrack[] | — | Ring tracks with label, value, and max |
width | number | 160 | SVG width |
height | number | 160 | SVG height |
thickness | number | 8 | Ring thickness in px |
gap | number | 4 | Gap between concentric rings |
showLegend | boolean | true | Show legend with percentages |
Token integration
| CSS Variable | Purpose |
|---|---|
--s-error | First (outermost) ring |
--s-success | Second ring |
--s-info | Third ring |
--s-border | Track background |
--s-text | Legend percentage |
--s-text-muted | Legend label |
--s-font-mono | Percentage font family |