Spinners

Installation

$ npx shadcn@latest add https://goodui.dev/r/spinners.json

The file lands in components/goodui/spinners.tsx and is yours to edit. With the @goodui registry added, npx shadcn@latest add @goodui/spinners works too.

Usage

import { Spinner } from "@/components/goodui/spinners"
import { Button } from "@/components/ui/button"

export function SaveButton({ saving }: { saving: boolean }) {
  return (
    <Button disabled={saving} aria-busy={saving}>
      {saving && <Spinner variant="ring" size="sm" label={null} />}
      {saving ? "Saving…" : "Save changes"}
    </Button>
  )
}

When to use

Examples

<div className="flex items-center gap-2 text-muted-foreground">
  <SpinnerTyping size={20} label="Assistant is typing" />
</div>

<Spinner variant="orbit" size="xl" className="text-primary" label="Loading calendar" />
<SpinnerBars size="lg" className="text-emerald-500" />

API reference

Accessibility

• •By default the root is role="status" with an sr-only "Loading" text, so screen readers announce it.
• •label replaces that text (translate it here); label={null} drops the role and hides the spinner from assistive tech, for when a parent already says it is busy.

Motion

• •ring turns every 0.75 s; dots scale and fade over 1.1 s, staggered 0.15 s; bars stretch over 0.9 s, staggered 0.12 s; pulse sends two rings 0.7 s apart on a 1.4 s loop; orbit's outer dot circles in 1.2 s and the inner one reverses in 0.8 s; typing dots hop over 1 s.
• •Reduced motion: nothing rotates, scales or hops. Every variant becomes a slow 1.6 s opacity fade, so it still reads as busy.

• •Pure CSS keyframes on transform and opacity; no JavaScript, no timers. The stylesheet is shared by every spinner on the page.

Notes for AI

Coding agents read these rules through MCP and llms.txt, or paste this page with Copy page.

FAQ

Related