Bain Logo

Linear Progress

Jump to Props

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

Similar to CircularProgress, 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.

Import

Use

Pass a number to the amount prop.

LinearProgressLabel

Pass this component as children and format your value however you like.

25%

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.

Roundness and Color

You can customise the roundness of the LinearProgress component as well as the color of the progress bar, the track behind it and the color of the label inside:

25%
25%
25%

Custom Example

Steps 2 of 3 completed

Props

  • Props
  • Styled Functions
PropTypeDefaultDescription
isIndeterminateboolean

Set to `true` when the value is unknown.

amountnumber

Value between 0 and 100 to indicate the completion percentage.

onClickfunction

Triggered when user clicks the element.

colorstring

Color of the filled bar.

trackColorstring

Color of the track bar behind the filled bar.

minHeightstring | number

Minimum height of the element. Useful for when the component has no children.

variantstandard | roundedstandard

Choice of two visual styles.

LinearProgressLabel

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.

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