1.2 KiB
1.2 KiB
@chakra-ui/spinner
Spinners provide a visual cue that an action is processing, awaiting a course of change or a result.
Installation
yarn add @chakra-ui/spinner
# or
npm i @chakra-ui/spinner
Import component
import { Spinner } from "@chakra-ui/spinner"
Usage
<Spinner />
Spinner with different sizes
Change the size of the spinner by passing the size prop.
<>
<Spinner size="xs" />
<Spinner size="sm" />
<Spinner size="md" />
<Spinner size="lg" />
<Spinner size="xl" />
</>
Spinner with color
Change the background color of the moving section of the spinner by passing the
color prop.
<Spinner color="red.500" />
Spinner with empty area color
Change the background color of the spinner by passing the emptyColor prop.
<Spinner color="red.500" emptyColor="gray.200" />
Spinner with different speed
Change the spinner's animation speed area by passing the speed prop. The unit
of the value matches the
animation-duration CSS property
property.
<Spinner color="red.500" emptyColor="gray.200" speed="0.65s" />