Docs
ProgressBar

ProgressBar

Indicates the progress of a determinate operation (with a known percentage). For indeterminate indicators, use Spinner.

When to use

✅ Use when…🚫 Avoid when…
  • In uploads, downloads, long imports where the duration can be estimated.
  • In multi-step forms to indicate advancement (with a numeric label).
  • As a secondary indicator next to background tasks.
  • For operations without a predictable duration. Use Spinner.
  • As a chart or dashboard metric. Use a charting component.

Demo

loading

Examples

<ProgressBar progress={42} />
<ProgressBar progress={75} color="success" showProgressLabel />
<ProgressBar progress={100} size="large" color="tertiary" />

Conditional rendering upon reaching 100%

function TimeredProgressBar({ progress }) {
  return progress !== 100 ? (
    <ProgressBar progress={progress} showProgressLabel />
  ) : (
    <Paper mb="large" alignItems="center" deepColor="information">
      <Text variant="h6" color="information">
        Operation completed.
      </Text>
    </Paper>
  );
}

Properties

Prop
Type
Default
Description
border
boolean
false
Rounds the overlay's corners. Without it, the bar has square corners.
color
"primary" | "secondary" | "tertiary" | "success" | "warning" | "danger" | "neutral"
primary
Bar color. Uses the theme's semantic palette.
progress
number
0
Current value as a percentage (0–100). Out-of-range values are clamped implicitly by the CSS transform.
showProgressLabel
boolean
false
Displays the `progress` value as text next to the bar.
size
"small" | "medium" | "large" | "extraSmall"
medium
Bar size (height).

Besides the props above, every component accepts the layout props (spacing, color, flex/grid, sizing, border) — not repeated here.

See also

  • Storybook story: Components / ProgressBar
  • Indeterminate alternative: Spinner
ModalSpinner