Skip to Content
Sponsor

Spinner

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

Import#

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.-
sizestring-
speedstringThe speed of the spinner. @example ```jsx <Spinner speed="0.2s"/> ```-
thicknessstringThe thickness of the spinner @example ```jsx <Spinner thickness="4px"/> ```-
variantstring-
Edit this page