Introduction

Spinners provide a visual cue that an action is being processed. They are built with HTML and CSS only, support multiple color themes, and include proper accessibility attributes.

Installation

import { Spinner } from '@/components/ui/spinner';

Usage

<Spinner />

Examples

Default

SpinnerDefault

import { Spinner } from '@/components/ui/spinner';

export default function Component() {
  return <Spinner />;
}

Themes

Use the theme prop to change the spinner color.

SpinnerThemes

import { Spinner } from '@/components/ui/spinner';

export default function Component() {
  return (
    <div className="flex flex-wrap items-center gap-4">
      <Spinner theme="primary" />
      <Spinner theme="secondary" />
      <Spinner theme="success" />
      <Spinner theme="danger" />
      <Spinner theme="warning" />
      <Spinner theme="neutral" />
    </div>
  );
}

Growing Spinner

Use variant="grow" for a pulsing grow animation instead of spinning.

SpinnerGrow

import { Spinner } from '@/components/ui/spinner';

export default function Component() {
  return (
    <div className="flex flex-wrap items-center gap-4">
      <Spinner variant="grow" theme="primary" />
      <Spinner variant="grow" theme="secondary" />
      <Spinner variant="grow" theme="success" />
      <Spinner variant="grow" theme="danger" />
      <Spinner variant="grow" theme="warning" />
    </div>
  );
}

Sizes

SpinnerSizes

import { Spinner } from '@/components/ui/spinner';

export default function Component() {
  return (
    <div className="flex flex-wrap items-center gap-4">
      <Spinner size="sm" />
      <Spinner size="md" />
      <Spinner size="lg" />
    </div>
  );
}

API Reference

Spinner

Prop	Type	Default	Description
`theme`	`primary \| secondary \| success \| danger \| warning \| info \| light \| dark \| neutral`	`primary`	Color theme
`variant`	`border \| grow`	`border`	Animation style
`size`	`sm \| md \| lg`	`md`	Spinner size
`label`	`string`	`Loading...`	Screen reader text

Spinner

On this page