Spinner
Spinners provide a visual cue that an action is processing awaiting a course of change or a result.
Import
import { Spinner } from '@chakra-ui/react';
Usage
Spinner with Color
Spinner with different size
Spinner with empty area color
Props
colorScheme
colorScheme
Description
Color Schemes for Spinner
are not implemented in the default theme. You can extend the theme to implement them.
Type
string
emptyColor
emptyColor
Description
The color of the empty area in the spinner
Type
string
Default
"transparent"
label
label
Description
For accessibility, it is important to add a fallback loading text. This text will be visible to screen readers.
Type
string
Default
"Loading..."
size
size
Type
"xs" | "sm" | "md" | "lg" | "xl"
Default
"md"
speed
speed
Description
The speed of the spinner. @example ```jsx <Spinner speed="0.2s"/> ```
Type
string
Default
"0.45s"
thickness
thickness
Description
The thickness of the spinner @example ```jsx <Spinner thickness="4px"/> ```
Type
string
Default
"2px"
variant
variant
Description
Variants for Spinner
are not implemented in the default theme. You can extend the theme to implement them.
Type
string