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#

Loading...
Editable Example

Spinner with Color#

Loading...
Editable Example

Spinner with different size#

Loading...
Loading...
Loading...
Loading...
Loading...
Editable Example

Spinner with empty area color#

Loading...
Editable Example

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

Proudly made inNigeria by Segun Adebayo