Progress Circular

A circular progress indicator. It can show a determinate value or an indeterminate loading state.

Usage

Determinate Progress

Shows the progress value between 0 and 100.

<ProgressCircular value={75} size="medium" />

Indeterminate Progress

Shows a looping animation indicating an ongoing task.

<ProgressCircular indeterminate size="large" />

Rounded Stroke

Progress stroke with rounded caps.

<ProgressCircular value={60} size="small" rounded />

API

Props

Prop	Type	Default	Required
value	number (0-100)	0	-
indeterminate	boolean	-	-
rounded	boolean	false	-
MarginProps	Token<MarginProps>	-	-
color	ThemeAccentColor	-	-
size	Responsive<Size>	'medium'	-