Components

Progress Ring

Circular progress with room for a label in the middle.

28%
64%
100%

Import

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

API reference

<ProgressRing>

Circular progress, 0–1, with optional content in the middle.

PropTypeDefault
labelRequired

Accessible name, e.g. "Savings goal".

string—
valueRequired

Progress from 0 to 1; values outside are clamped.

number—
className
string—
size
number84
stroke
number7