Spinner

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

chakra ui pro

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

Props#

colorScheme

Description

Color Schemes for Spinner are not implemented in the default theme. You can extend the theme to implement them.

Type
"whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram"

emptyColor

Description

The color of the empty area in the spinner

Type
string

label

Description

For accessibility, it is important to add a fallback loading text. This text will be visible to screen readers.

Type
string

size

Type
"sm" | "md" | "lg" | "xl" | "xs"
Default
"md"

speed

Description

The speed of the spinner. @example ```jsx <Spinner speed="0.2s"/> ```

Type
string

thickness

Description

The thickness of the spinner @example ```jsx <Spinner thickness="4px"/> ```

Type
string

variant

Description

Variants for Spinner are not implemented in the default theme. You can extend the theme to implement them.

Type
string
Edit this page

Proudly made inNigeria by Segun Adebayo

Deployed by Vercel