Spinner

Claude's starburst that grows and shrinks its rays.

import { ClaudeSpinner } from "../components/claude-spinner";

export default function ClaudeSpinnerExample() {
  return (
    <div className="bg-claude-bg flex items-center gap-6 p-6">
      <ClaudeSpinner animated size={22} />
      <ClaudeSpinner animated size={32} />
      <ClaudeSpinner size={22} />
    </div>
  );
}

$ bunx --bun shadcn@latest add @notra/claude-spinner

ClaudeSpinner draws the starburst as SVG lines and steps through six frames, from a dot to ten rays and back, every 120ms. It is announced like shadcn Spinner, with role="status" and an aria-label that defaults to “Loading”. It uses currentColor and defaults to Claude’s orange. Without animated, or with reduced motion, it shows the full starburst.

Used in