Components

Progress Ring

Circular progress with room for a label in the middle.

28%

64%

100%

Import

import { ProgressRing } from '@rinzai/zen';

Reaching the goal sends out a ring of glow.

$120

Circular progress, 0–1, with optional content in the middle. Reaching 1 while shown sends out a ring of glow, once.

Prop	Type	Default
`label`Required Accessible name, e.g. "Savings goal".	`string`	`—`
`value`Required Progress from 0 to 1; values outside are clamped.	`number`	`—`
`className`	`string`	`—`
`size`	`number`	`84`
`stroke`	`number`	`7`