@chakra-xui/spinner
v1.0.2
Published
A React component for displaying spinners and loaders
Downloads
12
Readme
@chakra-xui/spinner
Spinners provide a visual cue that an action is processing, awaiting a course of change or a result.
Installation
yarn add @chakra-xui/spinner
# or
npm i @chakra-xui/spinner
Import component
import { Spinner } from "@chakra-xui/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" />