ProgressCircle

ProgressCircles show the progression of a system operation such as downloading, uploading, or processing, in a visual way. They can represent determinate or indeterminate progress.

value

isIndeterminate

size

staticColor

import {ProgressCircle} from '@react-spectrum/s2';

<ProgressCircle
  aria-label="Loading…"
  value={50} />

Value

By default, the value prop is a percentage between 0 and 100. Use the minValue, and maxValue props to set a custom value scale.

minValue

maxValue

<ProgressCircle
  label="Progress"
  maxValue={150}
  value={50} />

API

Name	Type	Default
`styles`	`StylesPropWithHeight`	Default: —
Spectrum-defined styles, returned by the `style()` macro.
`isIndeterminate`	`boolean`	Default: —
Whether presentation is indeterminate when progress isn't known.
`value`	`number`	Default: `0`
The current value (controlled).
`size`	`'S' \| 'M' \| 'L'`	Default: `'M'`
The size of the ProgressCircle.
`staticColor`	`'black' \| 'white' \| 'auto'`	Default: —
The static color style to apply. Useful when the button appears over a color background.