Spinner

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

Usage#

<Spinner />

<Spinner />

Editable Example

Spinner with Color#

<Spinner color="red.500" />

<Spinner color="red.500" />

Editable Example

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>

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

Editable Example

Spinner with empty area color#

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

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

Editable Example

Props#

Name	Type	Default	Description
size	`xl`,`lg`,`md`,`sm`,`xs`	`md`	The size of the spinner.
thickness	`string`	`2px`	The thickness of the spinner.
speed	`string`	`0.45s`	The speed of the spinner.
label	`string`	`Loading...`	An accessible label for the spinner (Useful for screen readers)
color	`string`		The color of the spinner.
emptyColor	`string`	`transparent`	The color of the empty areas in the spinner.

Edit this page

Spinner

.css-12m0k8p{pointer-events:auto;}Usage.css-1l2j62r{color:#319795;font-weight:400;outline:none;opacity:0;margin-left:0.375rem;}.css-1l2j62r:focus,.css-1l2j62r[data-focus]{opacity:1;box-shadow:0 0 0 3px rgba(66,153,225,0.6);}#

Spinner with Color#

Spinner with different size#

Spinner with empty area color#

Props#

Usage#