Spinner / Loading Circle

Choose a spinner only when you need the smallest possible loading signal.

Timing

Rotate in 700-1000ms per cycle; if it remains visible past 2-3s, pair it with explanatory text.

Easing

Use linear rotation so the loop feels stable and does not imply progress jumps.

Risk

feels slowmisleading progress

Live Demo

What It Is

A circular animated icon that rotates continuously, signaling that a process is underway. The most universally recognized loading indicator.

Decision Guidance

Choose a spinner only when you need the smallest possible loading signal.

Best For

Short, unknown waits where the interface cannot show layout or percentage progress.

Avoid When

Avoid for waits over 3s, visible list loading, or operations where users need completion confidence.

Timing

Rotate in 700-1000ms per cycle; if it remains visible past 2-3s, pair it with explanatory text.

Easing

Use linear rotation so the loop feels stable and does not imply progress jumps.

Risk Tags

feels slowmisleading progress

Alternatives

Skeleton Screen Progress Bar Indeterminate Progress Bar

✓When to Use

Button loading states (disable button, show spinner inside)
Short wait times under 2 seconds where layout isn't important
Centered loading for full-page or modal content
Action confirmation (e.g., "Saving..." with spinner)

✕When NOT to Use

Long waits over 3 seconds (use progress bar or skeleton instead)
When users need to understand what percentage is complete
List or grid layouts where skeleton screen provides better context

You've Seen It In

GitHubGmailVercelStripe Dashboard

Prompt Templates

Copy and paste these prompts into your AI coding assistant.

Create a loading spinner - a rotating circular ring that spins continuously. Make it 24px and easy to drop into buttons.

Code Example (Tailwind CSS)

export function Spinner({ size = 'md', className = '' }: { size?: 'sm' | 'md' | 'lg'; className?: string }) {
  const sizeClasses = {
    sm: 'h-4 w-4 border-2',
    md: 'h-6 w-6 border-3',
    lg: 'h-8 w-8 border-4',
  };
  
  return (
    <div
      className={`${sizeClasses[size]} animate-spin rounded-full border-zinc-700 border-t-amber-warm ${className}`}
      role="status"
      aria-label="Loading"
    >
      <span className="sr-only">Loading...</span>
    </div>
  );
}

Related Effects

Progress Bar

A horizontal bar that fills from left to right, showing the percentage of a task that's complete. Gives users a sense of how much longer they need to wait.

Typing Dots (AI Reply)

Three animated dots that pulse sequentially, indicating that an AI or person is typing a response. Creates anticipation and confirms the system is processing.

Pulse Placeholder

A gentle fade-in-fade-out animation applied to placeholder content, creating a "breathing" effect. Softer and more subtle than shimmer.