Loading State
States & VariantsThe 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.
Visual Examples
Example 1
Example 2
Example 3
Visual examples for Loading State coming soon.
How It Works in Apps/Websites
Loading states communicate that something is happening. They can be shown as: spinners (for unknown duration), progress bars (for known progress), skeleton screens (for content loading), or disabled buttons with spinner (for form submissions). Loading states should appear quickly (under 100ms) to feel responsive.
How AI Interprets This Term
When you say 'loading state', AI expects: visual indicator of ongoing process - spinner replacing content, skeleton placeholder, progress bar, or button with spinner icon. Usually includes subtle animation. May disable interaction during loading.
Prompt Examples
Copy-paste these prompts to use in your AI tools.
Show a button with loading spinner
Design a submit button loading state: replace button text with spinner (16px), disable button, add 50% opacity. Show 'Submitting...' text next to spinner. After completion, briefly show checkmark before returning to default.
Show different loading patterns: spinner (unknown time), progress bar (known %), skeleton (content loading)
Compare With
Related or contrasting terms to help you understand the differences.
Variants & States
Variants
States
Usage Guidelines
When to Use
- •Data fetching
- •Form submissions
- •File uploads
- •Any async operation
When NOT to Use
- •Instant operations (under 100ms)
- •When progress is complete
Related Terms
Disabled State
The visual appearance of an element when it cannot be interacted with, typically shown with reduced opacity and without hover effects.
Loading Spinner
An animated circular indicator that shows users that a process is in progress, typically used during data fetching or form submissions.
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.