Spinner

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

    SourceTheme source@chakra-ui/spinner

Props#

colorScheme

Description

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

Type
(string & {})

emptyColor

Description

The color of the empty area in the spinner

Type
string
Default
"transparent"

label

Description

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

Type
string
Default
"Loading..."

size

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

speed

Description

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

Type
string
Default
"0.45s"

thickness

Description

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

Type
string
Default
"2px"

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 on GitHub

Proudly made inNigeria by Segun Adebayo

Deployed by Vercel