Spinner

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

Usage

Editable Example

<Spinner />

<Spinner />

Color

As with the Icon component, by default the Spinner will use the currentColor from it's parent. You can override this with the color prop.

Editable Example

<Flex space="space-x-4">
  <Spinner color="text-red-500" />
  <Spinner color="text-green-500" />
  <Spinner color="text-blue-500" />
  <Spinner color="text-indigo-500" />
  <Spinner color="text-purple-500" />
</Flex>

<Flex space="space-x-4">
  <Spinner color="text-red-500" />
  <Spinner color="text-green-500" />
  <Spinner color="text-blue-500" />
  <Spinner color="text-indigo-500" />
  <Spinner color="text-purple-500" />
</Flex>

Sizes

Editable Example

<Flex space="space-x-4">
  <Spinner size="sm" />
  <Spinner size="md" />
  <Spinner size="lg" />
  <Spinner size="xl" />
  <Spinner size="2xl" />
  <Spinner size="3xl" />
</Flex>

<Flex space="space-x-4">
  <Spinner size="sm" />
  <Spinner size="md" />
  <Spinner size="lg" />
  <Spinner size="xl" />
  <Spinner size="2xl" />
  <Spinner size="3xl" />
</Flex>

Example

Editable Example

<Flex
  height="h-72"
  alignItems="items-center"
  justifyContent="justify-center"
  backgroundColor="bg-gray-100"
  textColor="text-gray-500"
  borderRadius="rounded"
>
  <Box textAlign="text-center">
    <Spinner size="lg" />
    <Text margin="mt-3">Loading...</Text>
  </Box>
</Flex>

<Flex
  height="h-72"
  alignItems="items-center"
  justifyContent="justify-center"
  backgroundColor="bg-gray-100"
  textColor="text-gray-500"
  borderRadius="rounded"
>
  <Box textAlign="text-center">
    <Spinner size="lg" />
    <Text margin="mt-3">Loading...</Text>
  </Box>
</Flex>

Props

The Spinner component composes the Icon component so you can pass props for Box. These are extra props for the Spinner component.

Name	Type	Default	Description
`size`	`sm`, `md`, `lg`, `xl`, `2xl`, `3xl`	`md`	The size of the spinner.