Page Loader

Opaque full-page wait for auth, bootstrap, or route loading. Uses --af-color-background and --af-z-loader (above toasts).

This is not Backdrop (dimmed scrim behind a dialog). Put an af-spinner inside.

Markup

Code Live

<div class="af-page-loader" role="status" aria-live="polite" aria-busy="true" aria-label="Loading">
  <span class="af-spinner af-spinner-lg" aria-hidden="true"></span>
</div>

Dismiss

Add af-is-fading then remove the node after the opacity transition (so the app underneath can receive pointer events):

loader.classList.add('af-is-fading');
loader.addEventListener('transitionend', () => loader.remove(), { once: true });

When not to use

• Modal dimming → af-backdrop or native <dialog>
• In-button wait → aria-busy on af-btn
• Inline placeholder → af-skeleton

Accessibility

• role="status" + aria-live="polite" + aria-busy="true"
• Accessible name: aria-label="Loading" (or visually hidden text)
• Decorative spinner: aria-hidden="true"