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.

Code examples

With text

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

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

Props (API reference)

Name

Type

Default

className
string

CSS class to be appended to the root element

customSize
number

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

size
"small"
"large"
"medium"

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

medium
testId
string

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

cf-ui-spinner
variant
"primary"
"default"
"white"

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

default