ProgressCircle

A compact determinate progress indicator for places where a horizontal track does not fit. It uses the same tonal track, semantic fill, sizing, motion, and accessibility model as ProgressBar.

Props

Prop	Type	Default	Description
progress	number	Required	Progress from 0 to 1; values are safely clamped
color	Color	"highlight"	Semantic progress color
size	"small" \| "medium"	"medium"	Indicator diameter: 16px or 32px
aria-label	string	"Progress"	Accessible name when no visible label exists
aria-labelledby	string	-	ID of a visible label
jss	JSS	-	Custom styles for the SVG

Basic usage

<ProgressCircle progress={0.75} aria-label="Upload progress" />

Progress states

<ProgressCircle progress={0} />
<ProgressCircle progress={0.5} />
<ProgressCircle progress={1} />

Sizes

small · 16px

medium · 32px

<ProgressCircle progress={0.66} size="small" />  // 16px
<ProgressCircle progress={0.66} size="medium" /> // 32px, default

Semantic colors

Use color only when the process itself has a warning or error state.

<ProgressCircle progress={0.66} />
<ProgressCircle progress={0.66} color="warning" />
<ProgressCircle progress={0.66} color="negative" />

With a visible label

Syncing · 80%

<Row align="center" gap="small">
  <ProgressCircle
    progress={0.8}
    size="small"
    aria-labelledby="sync-progress-label"
  />
  <Span id="sync-progress-label">Syncing · 80%</Span>
</Row>

Behavior

The center remains transparent so the indicator sits naturally on any surface.
Progress starts at the top and advances clockwise.
Values animate without changing layout and respect reduced-motion preferences.
Values outside the supported range are safely clamped.
Keep progress moving forward. Use an activity indicator when the amount of work is unknown.

ProgressCircle renders the progressbar role and percentage-based ARIA values. Connect a visible description with aria-labelledby; use aria-label when there is no visible label.