Skip to Content
Sponsor

Spinner

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

Usage#

Loading...
Editable Example

Spinner with Color#

Loading...
Editable Example

Spinner with different size#

Loading...
Loading...
Loading...
Loading...
Loading...
Editable Example

Spinner with empty area color#

Loading...
Editable Example

Props#

NameTypeDescriptionDefault
colorSchemestring-
emptyColorstringThe color of the empty area in the spinner-
labelstringFor accessibility, it is important to add a fallback loading text. This text will be visible to screen readers.-
orientation"horizontal" | "vertical"-
sizestring-
speedstringThe speed of the spinner. @example ```jsx <Spinner speed="0.2s"/> ```-
styleConfigRecord<string, any>-
thicknessstringThe thickness of the spinner @example ```jsx <Spinner thickness="4px"/> ```-
variantstring-
Edit this page