Progress ring
Circular progress with rounded caps, a rolling centre percentage, segmented, indeterminate and activity-ring variants.
Preview
Uploading assets
159 of 248 files- ThumbnailsDone
- Video38%
- CaptionsQueued
Workspace setup
3 of 5 stepsSyncing settings
- Words: 3,240 words of 5,000 words (65%)
- Sessions: 4 sessions of 5 sessions (80%)
- Reviews: 2 reviews of 3 reviews (67%)
- Words65%3,240 / 5,000
- Sessions80%4 / 5
- Reviews67%2 / 3
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | null | — | Current value; null is indeterminate and spins. |
| min | number | 0 | Lower bound. |
| max | number | 100 | Upper bound. |
| label | string | — | Accessible name. |
| kind | "progressbar" | "meter" | "progressbar" | Task in progress or a measurement. |
| size | "sm" | "md" | "lg" | number | "md" | 32, 72 or 120 px, or a diameter. |
| thickness | number | 10% of size | Stroke width in px. |
| segments | number | — | Split the ring into steps. |
| color | string | "var(--chart-2)" | Fill colour. |
| showValue | boolean | size ≥ 56 | Rolling percentage in the centre. |
| children | ReactNode | — | Custom centre content. |
| valueText | string | percent | aria-valuetext. |
| rings | { key; label; value; max; color?; format? }[] | — | ActivityRings: concentric rings, outside in. |
| gap | number | 3 | ActivityRings: space between rings in px. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.