@packpackman/spinner
TypeScript icon, indicating that this package has built-in type declarations

2.1.0 • Public • Published

@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" />

Package Sidebar

Install

npm i @packpackman/spinner

Weekly Downloads

0

Version

2.1.0

License

MIT

Unpacked Size

4 kB

Total Files

3

Last publish

Collaborators

  • raj4646