Bain Logo

Spinner

Jump to Props

Provide a visual cue that an action is processing or awaiting an update.

Import

Usage

Size

Invert the color

Examples

Panel Loading Data

Fullscreen loading state

Below is an example of showing a fullscreen loading 'mask' over your application while it loads.

Inside a Button

The Button contains an internal isLoading prop that displays a Spinner when its amount is set to true. It is also disabled when loading.

Inline

Usually the Spinner size should be similar to the size of the content it surrounds. In this case, the body font size.

Pando the Panda

Pando

Profile Information

Pando is easily recognized by the large, distinctive black patches around her eyes, over the ears, and across her round body. The name "giant panda" is sometimes used to distinguish it from the red panda, a neighboring mustelid.

Pando's Friends:

I want my spinner to show a value

If you need to display specific, determinate progress, check out the CircularProgress and LinearProgress components too.

Props

  • Props
  • Styled Functions
PropTypeDefaultDescription
colorstringtext

Color of the spinner

sizemicro | tiny | smaller | small | medium | largesmall

Size of the spinner

valuenumber (0.0 - 1.0)0.5

How much of the spinner's stroke to show (decimal).

isIndeterminatebooleantrue

True when the spinner cannot depict any specific value

isRotatingbooleanfalse

Animate the rotation

invertColorbooleanfalse

For use on darker backgrounds

maxnumber100

Maximum value of the underlying progress indicator. Used for accessibilty purposes

minnumber0

Minimum value of the underlying progress indicator. Used for accessibilty purposes

capIsRoundboolean

Whether or not to show rounded caps on the stroke.

childrenReactNode

Only child sould be the <CircularProgressLabel />.

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