ProgressBar

Progress bars show either determinate or indeterminate progress of an operation over time.

Theme

Loading…80%

label

value

isIndeterminate

formatOptions

valueLabel

Example

ProgressBar.tsx

ProgressBar.css

Example

ProgressBar.tsx

ProgressBar.css

import {ProgressBar} from './ProgressBar';

<ProgressBar label="Loading…" value={80} />

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.

Progress33%

minValue

maxValue

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

Use SVG within a <ProgressBar> to build a circular progress indicator or spinner.

value

isIndeterminate

Example

ProgressCircle.tsx

Example

ProgressCircle.tsx

import {ProgressCircle} from './ProgressCircle';

<ProgressCircle
  aria-label="Loading…"
  value={60}
  size={64} />

<ProgressBar>
  <Label />
</ProgressBar>

Progress bars show either determinate or indeterminate progress of an operation over time.

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).
`children`	`ChildrenOrFunction<ProgressBarRenderProps>`	Default: —
The children of the component. A function may be provided to alter the children based on component state.

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

Default className: react-aria-ProgressBar

Render Prop	CSS Selector
`percentage`	CSS Selector: `—`
The value as a percentage between the minimum and maximum.
`valueText`	CSS Selector: `[aria-valuetext]`
A formatted version of the value.
`isIndeterminate`	CSS Selector: `:not([aria-valuenow])`
Whether the progress bar is indeterminate.