CircularProgress

• Component overview: Circular arc progress indicator supporting both determinate and indeterminate states.
• Component group: Progress Indicators
• Figma page: ↳ Progress Indicators > Progress Indicator

Indeterminate

Result

Loading...

Live Editor

render(
  <div style={{ display: 'flex', gap: 24, alignItems: 'center' }}>
    <CircularProgress size="sm" />
    <CircularProgress size="md" />
    <CircularProgress size="lg" />
  </div>,
)

Determinate

Result

Loading...

Live Editor

render(
  <div style={{ display: 'flex', gap: 24, alignItems: 'center' }}>
    <CircularProgress size="lg" value={0} />
    <CircularProgress size="lg" value={25} />
    <CircularProgress size="lg" value={50} />
    <CircularProgress size="lg" value={75} />
    <CircularProgress size="lg" value={100} />
  </div>,
)

Custom Color

Result

Loading...

Live Editor

render(
  <div style={{ display: 'flex', gap: 24, alignItems: 'center' }}>
    <CircularProgress className="text-[var(--Labels-Primary)]" />
    <CircularProgress className="text-[var(--Labels-Error)]" />
    <CircularProgress className="text-[var(--Labels-Success)]" />
  </div>,
)

Namespace Usage

Result

Loading...

Live Editor

render(<ProgressIndicators.CircularProgress size="md" value={60} />)

CircularProgress Props

Prop	Type	Default	Description
size	'sm' | 'md' | 'lg'	'md'	Preset size 16/24/36px
value	number	—	Progress value (0–100) — omit for indeterminate state
className	string	—	Custom style class