ProgressCircle

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.

Loader

  • Use when there is indeterminant progress, where there is an unknown amount of time for a task to complete.

Circular progress

  • Use when there is determinant 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!

<ProgressCircle error={false} percent={50} size="large" />

Props

Prop name
Type
Default
Description
errorboolean

Sets state to error.

percentnumber

Sets the fill length from 0 to 100.

sizexxSmall | xSmall | small | medium | largemedium

Size of the component.

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 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.