Loading States
Progress indicators for asynchronous operations. Choose the appropriate pattern based on context and expected duration.
Inline
Three animated dots used inside conversation flows or inline with content. Minimal disruption — never blocks the surrounding UI.
Skeleton
Placeholder shapes that mirror the content structure. Reduces perceived load time by anchoring the layout before data arrives. Use when the content shape is known — lists, cards, profile rows.
Overlay
A spinner over a frosted-glass overlay blocks interaction during critical operations like saves, uploads, or payments. Keep overlay loading rare — prefer inline or skeleton whenever possible.
Document ready
Click save to process
Progressive
Text streams in word-by-word with a blinking cursor. Used for AI-generated responses and real-time content. Always show at least one word before rendering — never flash an empty bubble.
Press stream to begin…
Loading Patterns
Four distinct patterns for different loading scenarios.
| Type | Context | Pattern | Duration | Motion |
|---|---|---|---|---|
| Inline | Within conversation flow, minimal disruption | Three animated dots with subtle accent color | < 5s | motion.duration.fast |
| Overlay | Full-screen processing, blocks interaction | Spinner with progress text, brand gradient background | 5-30s | motion.duration.normal |
| Skeleton | Content structure is known, waiting for data | Gray blocks matching text/image layout | < 10s | motion.duration.instant |
| Progressive | Streaming response or incremental updates | Text appears word-by-word with cursor indicator | Streaming | motion.duration.slow |
Momentum Rules
Timing principles ensuring loading states feel responsive and intentional.
Immediate Feedback
Show loading state within 100ms of user action
motion.duration.instant (80ms)Progressive Disclosure
Start with minimal indicator, add details after 300ms
motion.easing.easeOutSmart Timeout
Switch to skeleton or error after 10s with no data
motion.duration.slow (600ms)