Spinner

Sizes

Sizes — see the example below.

tsx

import { Spinner } from "~/components/ui/base/spinner";

<div class="flex items-center gap-6">
  <Spinner size="sm" />
  <Spinner size="md" />
  <Spinner size="lg" />
</div>

Variants

variant: among others ring, dash, dots, wave, stack, square, ripple, needle, … (default is arc).

tsx

import { Spinner } from "~/components/ui/base/spinner";

<div class="flex flex-wrap items-center gap-x-6 gap-y-8">
  <Spinner variant="ring" />
  <Spinner variant="dash" />
  <Spinner variant="dots" />
  <Spinner variant="typing" />
  <Spinner variant="pulse" />
  <Spinner variant="bars" />
  <Spinner variant="ping" />
  <Spinner variant="orbit" />
  <Spinner variant="grid" />
  <Spinner variant="activity" />
  <Spinner variant="duo" />
  <Spinner variant="chase" />
  <Spinner variant="square" />
  <Spinner variant="ripple" />
  <Spinner variant="wave" />
  <Spinner variant="stack" />
  <Spinner variant="needle" />
  <Spinner variant="cube" />
  <Spinner variant="arc" />
</div>

macOS style (Activity)

activity — rays like an activity indicator; duo — two concentric arcs facing each other; chase — segments around the perimeter with a pulse wave.

tsx

import { Spinner } from "~/components/ui/base/spinner";

<div class="flex flex-wrap items-center gap-8">
  <Spinner variant="activity" size="lg" />
  <Spinner variant="duo" size="lg" />
  <Spinner variant="chase" size="lg" />
</div>

With a label for screen readers

The label prop adds role="status" and hidden text ( sr-only ).

tsx

import { Spinner } from "~/components/ui/base/spinner";

<Spinner size="md" label="Loading data" />

Custom color

For ring / dash / duo / square override the borders via class. For arc use text-*. For fill and "line" variants (dots, wave, stack, needle, ripple, …) use text-* (currentColor).

tsx

import { Spinner } from "~/components/ui/base/spinner";

<div class="flex gap-6">
  <Spinner class="border-t-system-green" variant="ring" size="lg" />
  <Spinner class="text-system-green" variant="arc" size="lg" />
</div>

Metadata

Source: meta.generated.json (see npm run generate)

File base/spinner/meta.generated.json not found or path not allowed.