This is version 4 beta of Forma 36Go back to last stable version 3
Forma 36

Spinner

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.

Table of contents

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

NameRequiredDefaultTypeDescription
customSizenumberAllows resizing the spinner with any N value. The final size will be NxN pixels
sizemedium
"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
variantdefault
"primary"
"default"
"white"
Determines the color that will be used in the `fill` property of the SVG
classNamestringCSS class to be appended to the root element
styleCSSPropertiesAccepts a JavaScript object with camelCased properties rather than a CSS string
testIdcf-ui-spinnerstringA [data-test-id] attribute used for testing purposes