ProgressBar

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

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} />