1.0.0-rc.9 • Published 3 years ago
@hackr/chakra-ui-spinner v1.0.0-rc.9
@hackr/chakra-ui-spinner
Spinners provide a visual cue that an action is processing, awaiting a course of change or a result.
Installation
yarn add @hackr/chakra-ui-spinner
# or
npm i @hackr/chakra-ui-spinner
Import component
import { Spinner } from "@hackr/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" />
1.0.0-rc-.42
3 years ago
1.0.0-rc.9
3 years ago