Loader Overlay

🧭 When to Use a Loader Overlay

Use a Loader Overlay when:

• A user can’t interact with the interface while data or content loads

• You're fetching content that affects an entire screen, modal, or large section

• You want to visually signal that something is happening behind the scenes

Avoid using it for:

• Button or field-level loading (use a standalone Loader instead)

• Super fast transitions where a Skeleton screen or subtle indicator would be smoother

🎨 Overlay Types

• Dark – A high-opacity black or gray background that blocks visibility behind the loader. Use this for full-page transitions, system states, or modals.

• Subtle – A lighter, low-opacity background that still allows the UI behind it to be visible. Ideal for inline panels, cards, or sections where you want minimal disruption.

Both overlay types support accessibility contrast requirements and automatically adjust loader color (default or inverse).

🧩 Component Structure

The Loader Overlay is composed of:

• A background overlay layer (dark or subtle)

• A centered Loader component (circle, spinner, or quarter-circle)

• Optional loading message or icon (toggleable layer in Figma)

The overlay dims the entire background and captures interaction, preventing clicks until loading completes.

📏 Sizing & Layout

• Full Screen – Blocks the entire viewport (ideal for page loads or transitions)

• Container/Section – Blocks only a specific region (cards, dashboards, form blocks)

You can adjust the overlay bounds using auto-layout or clip layers in Figma depending on your layout needs.

♿ Accessibility Considerations

From a design perspective:

• Ensure the loader remains visible over the overlay (especially in subtle mode)

• Use contrast tokens to ensure legibility across themes and color modes

• Add optional supporting text (e.g., “Loading content...”) for long waits

From a code perspective (if implemented):

• Use aria-busy="true" on the parent container

• Add role="alert" or role="status" on the loader to announce activity

• Visually hidden labels like "Loading..." ensure screen readers detect the activity

✅ Best Practices

• Use dark overlay for full-page blocks and modal-level interactions

• Use subtle overlay when loading sections or elements that should still feel visible

• Don’t overuse — overlays should feel purposeful and temporary

• Pair with contextual messages when appropriate

• Ensure loaders are centered or visually balanced inside the blocked area