Color Schemes for Spinner are not implemented in the default theme. You can extend the theme to implement them.
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 />
Spinner with Color#
<Spinner color='red.500' />
Spinner with different size#
<Stack direction='row' spacing={4}><Spinner size='xs' /><Spinner size='sm' /><Spinner size='md' /><Spinner size='lg' /><Spinner size='xl' /></Stack>
Spinner with empty area color#
<Spinnerthickness='4px'speed='0.65s'emptyColor='gray.200'color='blue.500'size='xl'/>
Props#
colorScheme
colorSchemeDescription
Type
stringemptyColor
emptyColorDescription
The color of the empty area in the spinner
Type
stringDefault
"transparent"label
labelDescription
For accessibility, it is important to add a fallback loading text. This text will be visible to screen readers.
Type
stringDefault
"Loading..."size
sizeType
"xs" | "sm" | "md" | "lg" | "xl"Default
"md"speed
speedDescription
The speed of the spinner. @example ```jsx <Spinner speed="0.2s"/> ```
Type
stringDefault
"0.45s"thickness
thicknessDescription
The thickness of the spinner @example ```jsx <Spinner thickness="4px"/> ```
Type
stringDefault
"2px"variant
variantDescription
Variants for Spinner are not implemented in the default theme. You can extend the theme to implement them.
Type
string