ProgressBar

ProgressBars show the progression of a system operation: downloading, uploading, processing, etc., in a visual way. They can represent either determinate or indeterminate progress.

Loading…

50%

label

value

isIndeterminate

size

staticColor

labelPosition

formatOptions

valueLabel

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

<ProgressBar 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.

Progress

33%

minValue

maxValue

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

API

Name	Type	Default
`isIndeterminate`	`boolean`	Default: —
Whether presentation is indeterminate when progress isn't known.
`valueLabel`	`ReactNode`	Default: —
The content to display as the value's label (e.g. 1 of 4).
`value`	`number`	Default: `0`
The current value (controlled).
`size`	`'S' \| 'M' \| 'L' \| 'XL'`	Default: `'M'`
The size of the ProgressBar.
`staticColor`	`'white' \| 'black' \| 'auto'`	Default: —
The static color style to apply. Useful when the button appears over a color background.
`styles`	`StylesProp`	Default: —
Spectrum-defined styles, returned by the `style()` macro.

`formatOptions`	`Intl.NumberFormatOptions`	Default: `{style: 'percent'}`
The display format of the value label.