ProgressBar

Overview

Progress indicators give the user system visibility when a front end action triggers a need from the back end.

When to use:

  • Progress indicators can be combined with additional status feedback.
  • Use when there is a greater than one second waiting time.

Linear progress

  • Often used to reflect import/export actions.
  • Use the indeterminant linear progress, where there is an unknown amount of time for a task to complete.
  • Use the determinant linear progress, where there is a known amount of time for a task to complete.

Implementation

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.

Edit the code below to see your changes live!

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

Props

Prop name
Type
Default
Description
percentnumber

Sets the fill length from 0 to 100.

Props ending with * are required

Do's and Don'ts

Do
Status feedback should be clear and direct. Limit verbiage and information.
If progress is determinate, use a percentage or copy to reflect the completeness of the action.
Don't
Don’t use if an action is not triggering a back end action.
Don’t use to indicate the completeness of a user-dependent task.