Progress Ring
An Apple-inspired progress ring component with animated radial bars for tracking multiple metrics.
Category: ComponentsVersion: 1.0.0
1,245
Steps
Props
| Prop | Type | Default | Description |
|---|---|---|---|
data | ActivityData[] | [
{ name: "Move", value: 650, goal: 1000, fill: "#FF3B30" },
{ name: "Exercise", value: 28, goal: 30, fill: "#32D74B" },
{ name: "Stand", value: 10, goal: 12, fill: "#627fe8" }
] | Array of activity data objects. Each object should have: name (string), value (number), goal (number), fill (color string), and optional icon (string) and animate (boolean). |
size | number | 400 | The width and height of the component in pixels. |
showCenter | boolean | true | Whether to display the center metric. |
centerMetric | object | { value: "2,847", label: "Steps", sublabel: "Today" } | The metric displayed in the center. Object with value (string or number), label (string), and optional sublabel (string). |
className | string | — | Additional CSS classes to apply to the component container. |