CircularProgress

A circular progress ring for determinate or indeterminate loading state.

Examples

Default

60%

Upload progress

<CircularProgress hasValueLabel label="Upload progress" value={60} />

Variants

60%

Info

80%

Success

45%

Warning

30%

Error

50%

Neutral

<div style={{display: 'flex', alignItems: 'flex-start', gap: 24}}>
  <CircularProgress hasValueLabel label="Info" value={60} variant="info" />
  <CircularProgress
    hasValueLabel
    label="Success"
    value={80}
    variant="success"
  />
  <CircularProgress
    hasValueLabel
    label="Warning"
    value={45}
    variant="warning"
  />
  <CircularProgress
    hasValueLabel
    label="Error"
    value={30}
    variant="error"
  />
  <CircularProgress
    hasValueLabel
    label="Neutral"
    value={50}
    variant="neutral"
  />
</div>

Sizes

Compact

60%

Default

60%

Large

<div style={{display: 'flex', alignItems: 'flex-start', gap: 24}}>
  <CircularProgress label="Compact" size={32} value={60} />
  <CircularProgress hasValueLabel label="Default" value={60} />
  <CircularProgress hasValueLabel label="Large" size="6rem" value={60} />
</div>

Custom Formatter

3 / 5

Upload progress

<CircularProgress
  hasValueLabel
  label="Upload progress"
  value={3}
  formatValueLabel={(value, max) => `${value} / ${max}`}
  max={5}
  size={96}
/>

Indeterminate

Upload progress

<CircularProgress
  hasValueLabel
  label="Upload progress"
  value={undefined}
  isIndeterminate
/>

Disabled

60%

Upload progress

<CircularProgress
  hasValueLabel
  label="Upload progress"
  value={60}
  isDisabled
/>

Hidden Label

60%

Upload progress

<CircularProgress
  hasValueLabel
  label="Upload progress"
  value={60}
  isLabelHidden
/>

API

CircularProgress

A circular progress ring for determinate or indeterminate loading state.

Prop	Type	Default	Description
className	string	—	Additional CSS class names applied to the root element.
data-testid	string	—	Test ID applied to the root element.
formatValueLabel	(value: number, max: number) => string	—	Custom formatter for the centered value label and aria-valuetext.
hasValueLabel	boolean	false	Whether to display the formatted value in the center of the ring.
isDisabled	boolean	false	Whether the progress ring is visually disabled.
isIndeterminate	boolean	false	Whether to render a rotating indeterminate progress arc.
isLabelHidden	boolean	false	Whether to visually hide the label below the ring.
label*	string	—	Accessible label for the progress ring.
max	number	100	Maximum progress value.
ref	Ref<HTMLDivElement>	—	Ref forwarded to the root element.
role	'meter' | 'progressbar'	'progressbar'	ARIA role for the progress indicator. Use 'progressbar' for task completion and 'meter' for static gauges.
size	number | string	64	Diameter of the progress ring. Numbers are pixels and strings are used as CSS lengths.
style	CSSProperties	—	Inline styles applied to the root element.
value	number	0	Current progress value.
variant	"error" | "info" | "success" | "warning" | "neutral"	'info'	Semantic color variant.