Spinner

A Spinner is a graphic element that helps communicating to users that an action is in progress and it will take some time to be completed.

<Spinner />
<Spinner />
Hide source

Code examples

With text

It’s possible to use the Spinner with other elements. A very common pattern is using it together with text.

<div>
  Loading <Spinner />
</div>
<div>
  Loading <Spinner />
</div>
Hide source

Another good example of the Spinner being used with other components is the loading state of Button component.

Props

• Name

  className

  Description

  CSS class to be appended to the root element

  string
• Name

  customSize

  Description

  Allows resizing the spinner with any N value. The final size will be NxN pixels

  number
• Name

  size

  Description

  Controls the size of the spinner. The default `medium` size is 20px wide, the `small` size is 14px wide, and the `large` size is 36px wide

  "small"

  "large"

  "medium"

  Default

  medium
• Name

  testId

  Description

  A [data-test-id] attribute used for testing purposes

  string

  Default

  cf-ui-spinner
• Name

  variant

  Description

  Determines the color that will be used in the `fill` property of the SVG

  "primary"

  "default"

  "white"

  Default

  default