Spinner

Spinners provide a visual cue that an action is processing awaiting a course of change or a result.

Accessibility

  • role="progressbar" is applied to the element.

Spinner basic usage

Loading

Spinner with Negative Color

Loading

Spinner with different size

Loading

Spinner With Overrides

Loading

Overrides

Additionally, you can fully customize any part of the Spinner through the overrides prop. The Spinner consists of multiple subcomponents that are listed bellow and you can override each one of them. To help you identify the names of these subcomponents, you can highlight them through this selector:

Loading

Note: You should always use longhand CSS properties. Mixing shorthands and longhands will lead into strange behaviors!

Spinner API

Warning any = "Prop types are not shown in dev mode"

extract-react-types is not being run in dev mode for speed reasons. If you need to see prop types add the environment variable FORCE_EXTRACT_REACT_TYPES eg:

  • FORCE_EXTRACT_REACT_TYPES=true yarn start <packageName>
  • FORCE_EXTRACT_REACT_TYPES=true yarn start:<team>