Spinner

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

Import#

import { CSpinner } from '@chakra-ui/vue'

Usage#

Editable Example

<c-spinner />

Spinner with Color#

Editable Example

<c-spinner color="blue.500" />

Spinner with different size#

Editable Example

<c-stack is-inline :spacing="4">
  <c-spinner size="xs" />
  <c-spinner size="sm" />
  <c-spinner size="md" />
  <c-spinner size="lg" />
  <c-spinner size="xl" />
</c-stack>

Spinner with empty area color#

Editable Example

<c-spinner
  thickness="4px"
  speed="0.65s"
  empty-color="green.200"
  color="vue.500"
  size="xl"
/>

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.

❤️ Contribute to this page

Caught a mistake or want to contribute to the documentation? Edit this page on GitHub!