Loader
Loader
The Loader creates a full-screen overlay that blocks user interaction during critical operations. It provides clear feedback that the system is working.
Visual Specifications
Section titled “Visual Specifications”| Property | Value |
|---|---|
| Size | Full viewport (100vw × 100vh) |
| Background | Semi-transparent (configurable) |
| Z-index | Highest layer (modal) |
| Position | Fixed, full screen |
Variants
Section titled “Variants”Semi-transparent white/dark background for general loading
Increased transparency to show underlying content
Includes descriptive text below the spinner for long operations
Usage Guidance
Section titled “Usage Guidance”When to use
Section titled “When to use”- During page transitions
- For complex operations blocking the entire UI
- When multiple async operations need unified loading
- To prevent user interaction during critical operations
Best practices
Section titled “Best practices”| ✅ Do | ❌ Don’t |
|---|---|
| Keep loading times short (under 5 seconds) | Use for quick operations (< 500ms) |
| Use descriptive messages for long operations | Block navigation unnecessarily |
| Disable on routes where it’s not needed | Use without clear context |
| Provide feedback for operations over 3 seconds | Overuse for every small operation |
Loading Duration Guidelines
Section titled “Loading Duration Guidelines”| Duration | Recommendation |
|---|---|
| < 1s | No loader needed |
| 1-3s | Consider skeleton or inline loader |
| 3-10s | Full loader with message |
| > 10s | Consider progress indicator |