Loading Overlay

Preview

Place the overlay inside a position: relative container; its absolute backdrop fills the parent.

<div style="position: relative; min-height: 180px;">
  <p>Underlying content being covered.</p>
  <LoadingOverlay active={true} message="Loading data…" />
</div>

States

A transparent backdrop lets the content show through faintly. When active is false the overlay renders nothing.

<LoadingOverlay active={true} transparent={true} message="Saving…" />
<LoadingOverlay active={false} />

API

Accessibility

• The spinner carries role="status" and aria-label="Loading".
• The backdrop sits at z-index: 10 over the parent and intercepts interaction while active.
• For long operations, consider moving focus or announcing the busy state at the call site.

Theming surface

Every public token this component reads, extracted from its source at build time. The Resolves to column walks each token's real lineage — component → semantic → primitive → raw value — so you can see exactly where re-pointing it lands. A spoke re-skins by overriding these in its theme-<slug>.css; component internals are never edited. No hook for what you need? File it with /request-lego.