Progress Ring
Display a completion value around a circular track.
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 },
]}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
tracks | ProgressRingTrack[] | — | — |
width | number | — | — |
height | number | — | — |
thickness | number | 8 | Track thickness. |
gap | number | 4 | Gap between rings. |
showLegend | boolean | true | Show legend. |
Token integration
| CSS Variable | Purpose |
|---|---|
--s-error | Error |
--s-success | Success |
--s-info | Info |
--s-warning | Warning |
--s-border | Border |
--s-radius-full | Radius full |
--s-text-muted | Text muted |
--s-font-mono | Font mono |
--s-text | Text |