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

/@packpackman/spinner/

    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