Apple-style Activity Rings for React
Rendered as SVG, animated with react-spring
<ActivityRings
rings={[
{ value: 0.9 },
{ value: 0.6 },
{ value: 0.3 },
]}
/>| Property | Type | Required | Default | Description |
|---|---|---|---|---|
| rings | ActivityRingProps[] | yes | Array describing each ring | |
| width | number | string | no | 440px | Size of resulting SVG |
| ringWidth | number | no | 10 | Thickness of each ring, in SVG viewport units |
| animated | boolean | no | true | Should SVG animate on rings value changes |
| Property | Type | Required | Default | Description |
|---|---|---|---|---|
| value | number | yes | Value of the ring in percents, where 1 means full circle | |
| color | string | no | see DefaultColors.ts | Main color of the ring |