Radial Progress

Radial tick-gauge progress and loading indicator with a traveling height wave.

75%

Roughness1.5Lock seedValue75.0SizeColor#2d6a4fIndeterminateAnimate

<RadialProgress value={75} size="md" activeColor="#2d6a4f" roughness={1.5} />

CLI install

npx doodleui-react add radial-progress

import { RadialProgress } from "doodleui-react";

{/* Determinate */}
<RadialProgress value={75} />

{/* Indeterminate loader */}
<RadialProgress />

Exposes role="progressbar" with aria-valuenow when determinate. Indeterminate mode sets aria-busy and defaults aria-label to "Loading".

Prop	Type	Default	Notes
value	number \| undefined	undefined	Determinate progress. Omit for indeterminate loading mode.
max	number	100	Maximum value. Sets aria-valuemax.
size	"sm" \| "md" \| "lg" \| number	"md"	Gauge diameter preset or pixel size.
tickCount	number	48	Number of radial tick bars along the arc.
activeColor / trackColor	string	theme	Active and inactive tick colors.
showValue	boolean	true	Show center percentage or children.
waveSpeed	number	2	Seconds per full wave cycle.
animate	boolean	true	Traveling height/brightness wave on ticks. Reduced motion freezes the wave. Overrides DoodleUIProvider. Reduced motion disables this unless the provider set forceAnimate.
roughness	number	1.5	How wobbly the stroke is. 0 is almost geometric. 3+ is messy.
seed	number	provider / random	Locks the sketch. Omit to follow SketchSeedProvider (Shuffle) or a mount-time random seed.
sketchColor	string	#1f1d1a	Stroke color. Also tints primary/accent fills where relevant.
className	string	undefined	Passed through to the root element.
style	CSSProperties	undefined	Passed through to the root element.