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
`percent`	`number`		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.

Beta