Spinner

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

Import#

import { Spinner } from "@nature-ui/core";

<Spinner />

<Spinner className="text-red-500" />

<Stack row>
  <Spinner size="2rem" />
  <Spinner size="3rem" />
  <Spinner size="4rem" />
</Stack>

<Spinner
  thickness="4px"
  speed="0.65s"
  className="text-blue-500"
  size="3rem"
  emptyColor="var(--primary-200)"
/>

Name	Type	Default	Description
size	`"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 css color of the empty areas in the spinner.