Component

Circular Progress

Progress as a ring. The arc draws in from empty on mount and eases to every new value; omit value for work of unknown length.

Determinate and indeterminate

62%100%

sm, md and lg are 40, 64 and 96px rings, and the percentage scales with the ring.

70%70%

size takes a named step or a diameter in px, and thickness overrides the default tenth-of-the-diameter stroke.

40%40%

Prop	Type	Default	Description
label	string	"Loading"	Accessible name for the ring - what is progressing.
showValue	boolean	false	Show the percentage in the centre of the ring.
size	number \| ComponentSize	"md"	A named size, or the ring's diameter in px. Default `"md"`.
thickness	number	None	Stroke width in px. Defaults to a tenth of the diameter - the thick, round-capped arc of the reference - with a 3px floor.
value	number	None	0–100. Omit for an indeterminate spinner.
variant	StatusTone	"default"	Colours the arc to report an outcome rather than plain progress.

label"Loading"

string

Accessible name for the ring - what is progressing.

showValuefalse

boolean

Show the percentage in the centre of the ring.

size"md"

number | ComponentSize

A named size, or the ring's diameter in px. Default `"md"`.

thicknessNone

number

Stroke width in px. Defaults to a tenth of the diameter - the thick, round-capped arc of the reference - with a 3px floor.

valueNone

number

0–100. Omit for an indeterminate spinner.

variant"default"

StatusTone

Colours the arc to report an outcome rather than plain progress.

Also accepts everything from React.HTMLAttributes<HTMLSpanElement>.

Coding agents read this reference, with its examples, from the version your project has installed, through the Fuji UI MCP server. Set up your agent