Neurotic and Probably Misinformed

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

    1.2.1 • 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" />

    Install

    npm i @chakra-ui/spinner

    DownloadsWeekly Downloads

    213,659

    Version

    1.2.1

    License

    MIT

    Unpacked Size

    31.7 kB

    Total Files

    14

    Last publish

    Collaborators

    • segunadebayo
    • _codebender828
    • with-heart