Spinner

Shows that something is loading. Takes the colour of the text it sits in, or a tone.

Installation

npx rasengan-ui add spinner

Or with the shadcn CLI, from the registry:

npx shadcn@latest add https://ui.rasengan.dev/r/base/spinner.json

Usage

import { Button } from "@/components/ui/button";
import { Spinner } from "@/components/ui/spinner";
 
export function Usage() {
  return (
    <Button disabled>
      <Spinner /> Saving
    </Button>
  );
}

Sizes and tones

Three sizes; without a tone it takes currentColor, so it matches the button, badge or text around it.

<Spinner size="lg" tone="success" />

Villages

The spinner has no surface of its own: it follows the text colour, and the tones follow the nature and the status colours of each village.

Accessibility

• role="status" with the name "Loading". Say what loads with aria-label ("Loading invoices") when several things can load at once.
• With reduced motion it turns slowly rather than stopping, so it still reads as busy.

API reference

The props of <svg> (Lucide's Loader2Icon), plus:

spinnerVariants({ size, tone }) returns the same classes.