Spinner - Dreamy UI

Spinner

Spinner indicates a loading state for a user.

#

Installation

npx dreamy add spinner

pnpm dlx dreamy add spinner

yarn dlx dreamy add spinner

bunx dreamy add spinner

#

Usage

Spinner indicates a loading state to users while content is being fetched or processed. It provides visual feedback during asynchronous operations.

<Spinner />

#

Sizes

You can set the size of the Spinner by using the size prop.

<Flex wrapped gap={4} alignItems="center">
  <Spinner size="sm" />
  <Spinner size="md" />
  <Spinner size="lg" />
</Flex>

#

With Label

You can add a label to the Spinner by using the label prop.

<Spinner label="Loading..." />

#

Speed

You can control the animation speed of the Spinner by using the speed prop. It accepts values in seconds (s) or milliseconds (ms).

Fast

Default

Slow

<Flex wrapped gap={4} alignItems="center">
  <Spinner speed="0.5s" label="Fast" />
  <Spinner speed="0.8s" label="Default" />
  <Spinner speed="1.5s" label="Slow" />
</Flex>

#

Color

You can change the color of the Spinner by using the color prop.

<Flex wrapped gap={4} alignItems="center">
  <Spinner color="primary" />
  <Spinner color="success" />
  <Spinner color="warning" />
  <Spinner color="error" />
</Flex>

#

Label Styling

You can style the label using the labelProps prop or by using the css prop to target the label part.

Custom Label

Styled Label

<Flex wrapped gap={4} alignItems="center">
  <Spinner 
    label="Custom Label" 
    labelProps={{ color: "primary", fontSize: "md" }} 
  />
  <Spinner 
    label="Styled Label" 
    css={{
      "& [data-part=label]": {
        color: "success",
        fontWeight: "bold"
      }
    }}
  />
</Flex>

#

Usage in Buttons

Spinners are commonly used in buttons to indicate loading states. The Button component has built-in support for spinners.

<Button isLoading variant="primary">
  Loading Button
</Button>

Snippet

Stat