Skip to content

Skeleton & Lazy Loading

Skeleton loading

Any element with aria-busy="true" shows a pulsing skeleton.

Loading card…

Hidden while loading. The skeleton overlay pulses.

Loaded card

This card loaded normally.

<article aria-busy="true">
  <header><strong>Loading card…</strong></header>
  <p>Content hidden behind skeleton overlay.</p>
</article>

Lazy loading

Images with loading="lazy" fade in when they enter the viewport.

Lazy-loaded landscape
Lazy image — fades in on load
<img loading="lazy"
     src="photo.jpg"
     alt="Description"
     width="400" height="300">

Print stylesheet

Built-in @media print hides nav, dialogs, and toasts. Links show their URLs. Try Ctrl+P.

<!-- Automatic — no extra markup needed.
     FAP CSS includes a print stylesheet that:
     - Hides nav, dialogs, toasts
     - Shows link URLs after anchor text
     - Removes decorative backgrounds -->