What is Loading Spinner?

Loading Spinners are animated circular indicators that show "something is happening" without indicating progress or duration. Simple, universal signal for loading. Best for short waits (<2 seconds) where progress can't be measured. For longer loads, use progress bars or skeleton screens.

When Should You Use This?

Use spinners for short, indeterminate waits: API calls, search results, button actions, saving data. Place inline (next to button), centered (full-page load), or contextual (loading card content). For >2 seconds, consider progress bar. For >5 seconds, use skeleton screen. Always provide text label ("Loading...") for accessibility.

Common Mistakes to Avoid

• •Spinner for everything—long loads need progress bars or skeletons, not infinite spinners
• •No context—"Loading..." is vague; say what's loading ("Loading invoices...")
• •Spinner in button—disables button but keep text visible; don't replace text with spinner
• •No timeout—if loading fails, spinner spins forever; show error after reasonable timeout
• •Multiple spinners—if whole page is loading, use single full-page spinner, not 10 small ones

Real-World Examples

• •Linear—inline spinner on "Save" button while saving issue
• •Gmail—spinner while loading emails, shows skeleton after 1 second
• •Stripe—spinner on payment button during processing
• •Notion—spinner while creating new page, then redirects