Display

Spinner

A hand-drawn loading arc. Freezes politely under reduced motion.

Show code

"use client";

import { Button } from "@/registry/lilt/ui/button";
import { Spinner } from "@/registry/lilt/ui/spinner";

export default function SpinnerDemo() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-6">
      <Button disabled>
        <Spinner className="text-current" label={null} size={18} />
        Saving…
      </Button>
      <Spinner />
    </div>
  );
}

Installation

npx shadcn@latest add @lilt/spinner

Accessibility

Announces 'Loading' via role=status; pass label to change it, or label={null} inside already-labeled buttons.
Reduced-motion users see a static arc instead of a spin.