A circular SVG progress indicator that animates as the value changes. Supports a single ring or multiple concentric rings via the rings prop.
Use a positive max and enough size for every ring’s radius to remain positive. Non-positive maxima render an empty arc. A multi-ring control has no default center label; provide children for a summary. The root has role=progressbar and single-ring numeric ARIA values, but 0.0.34 does not forward arbitrary attributes such as aria-label. Include an adjacent textual description rather than assuming extra props reach the DOM.
Pass a value — the percentage is derived automatically from value / max.
Control the outer diameter with size and arc thickness with strokeWidth. Pass any CSS color to color and trackColor.
Use the children snippet to render arbitrary content in the center. The snippet takes no parameters — reference your local state directly.
Pass a rings array to render multiple concentric rings, each with its own value, optional max, and color. Control spacing with gap.
A live clock with progress rings for hours, minutes, and seconds.