Spinner

Spinners provide a visual cue that an action is processing awaiting a course of change or a result.

    Theme source

Import#

import { Spinner } from '@chakra-ui/react'

Usage#

<Spinner />

Spinner with Color#

<Spinner color="red.500" />

Spinner with different size#

<Stack direction="row" spacing={4}>
  <Spinner size="xs" />
  <Spinner size="sm" />
  <Spinner size="md" />
  <Spinner size="lg" />
  <Spinner size="xl" />
</Stack>

Spinner with empty area color#

<Spinner thickness="4px" speed="0.65s" emptyColor="gray.200" color="blue.500" size="xl" />
Edit this page on GitHub