Skip to main content

Spinner

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

Import

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

Usage

Spinner with Color

Spinner with different size

Spinner with empty area color

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