Loading Spinner
UI ComponentsAn animated circular indicator that shows users that a process is in progress, typically used during data fetching or form submissions.
Visual Examples
Example 1
Example 2
Example 3
Visual examples for Loading Spinner coming soon.
How It Works in Apps/Websites
Loading spinners provide visual feedback during asynchronous operations. They rotate continuously, indicating that the system is working. Common styles include circular arc that rotates, dots that pulse in sequence, or complete circles with spinning gradient. Used for button loading states, page loads, and inline operations.
How AI Interprets This Term
When you say 'loading spinner', AI expects: a circular element (16-32px) with continuous rotation animation. Usually a partial circle (arc) that spins, or a full circle with visible spinning segment. Color often matches brand primary or is neutral gray. Smooth, continuous rotation (1-2 second cycles).
Prompt Examples
Copy-paste these prompts to use in your AI tools.
Create a loading spinner for a button
Design a loading spinner: 20px diameter, blue (#3b82f6) partial circle (270deg arc) that rotates 360deg in 0.8 seconds linear infinite. White background visible through gap. Add 'Loading...' text next to spinner.
Show different spinner styles: circular arc, three bouncing dots, pulsing circle
Compare With
Related or contrasting terms to help you understand the differences.
Variants & States
Variants
States
Usage Guidelines
When to Use
- •Button loading states
- •Quick async operations
- •Inline loading indicators
- •When duration is unknown
When NOT to Use
- •Long operations (use progress bar)
- •Page loads (use skeleton)
- •When you can show progress percentage
Related Terms
Loading State
The visual appearance of an element or page while content is being fetched or a process is running, indicating to users that the system is working.
Progress Bar
A horizontal indicator that shows the completion status of a task or process, filling from left to right as progress is made.
Skeleton Loader
A placeholder UI that mimics the layout of content while it's loading, using animated gray shapes to represent text, images, and other elements.