Progress Bar

Progress Indicator Design Guidelines.

Determinant

Determinant Progress represents a known amount of time or completeness for a task. A percent prop needs to be passed to render a determinate progress.

<Box marginVertical="large">
  <ProgressBar percent={50} />
</Box>

Indeterminant

Indeterminant Progress represents an unknown amount of time for a task to complete. Component will render an indeterminant progress when missing a percent prop.

<Box marginVertical="large">
  <ProgressBar />
</Box>

API

ProgressBar