No Padding Module

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

    2.0.12 • 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

    406,142

    Version

    2.0.12

    License

    MIT

    Unpacked Size

    11.5 kB

    Total Files

    10

    Last publish

    Collaborators

    • timkolberger
    • segunadebayo
    • _codebender828