Bain Logo

Circular Progress

Jump to Props

Express a wait time or display the length of a process.

Similar to LinearProgress, this component should be shown when the user needs to know how far along a process is or if they need to wait to be updated on the progress.

Example use cases include steps in a wizard, upload progress or questions in a survey. If you simply need to show an animated spinner that has no 'amount' value, use Spinner.

Import

Use

CircularProgressLabel

40%

Changing the size

Changing the color

Rotating example

Give the user a stronger sense of progress by animating the rotation. Do this by adding the isRotating boolean prop. This pattern is common on mobile devices.

0%

Indeterminate State

If you are waiting for the progress amount to be sent back from (for example) a server, you can set isIndeterminate on the component. In this state, the amount prop is ignored.

Props

  • Props
  • Styled Functions
PropTypeDefaultDescription
isIndeterminateboolean

Set to `true` when the value is unknown.

valuenumber

Value between 0 and 100 to indicate the completion percentage.

onClickfunction

Triggered when user clicks the element.

iconReactNode

Pass in any Icon element to appear to the left of the text.

onDismissfunction

Triggered when user clicks the X button. Note that the X button is only shown if an onDismiss handler is passed.

CircularProgressLabel

Props

PropTypeDefaultDescription
childrenReactNode

Usually used to render a number to indicate the completion percentage. See example

fontSizestring | number

Option to change the font size of the label contents.

The Spinner component

If you will never know the amount (ie. the user just needs to wait), you should use the Spinner component instead.

© 2021, Made with ❤️
by ADAPT @ Bain & Company
Privacy Policy