Skeleton Screens

Doing it properly

• Match the real layout in dimensions and position, or the shift on arrival defeats the purpose.
• Keep the shimmer subtle, or remove it entirely under prefers-reduced-motion.
• Do not skeleton for waits under about 300ms.
• Mark the skeleton container aria-busy and hide the placeholder shapes from assistive technology.
• Show a realistic number of placeholder items, not always exactly three.

Skeletons that help

What deserves a placeholder, and what does not

A skeleton is a promise about what is arriving. Promising the wrong thing is worse than promising nothing.

• Text blocks and list rows: yes, at the real line length, with the last line shorter.
• Images and avatars: yes, at the exact aspect ratio, which is most of the layout-shift win.
• Numbers, totals and counts: usually not. A grey bar where a figure belongs reads as a number the reader cannot make out.
• Charts: not as a fake chart. Reserve the space and say the data is loading, or readers will try to read the placeholder.
• Anything that may not arrive: no. A skeleton for a section that turns out to be empty promised content that never existed.
• Controls and buttons: no. Render them disabled instead, so the reader can see what will be possible.

Announcing it, and respecting reduced motion

/* <div class="card" aria-busy="true">
     <div class="skeleton-line" aria-hidden="true"></div>
   </div> */

.skeleton-line {
  height: 1rem;
  border-radius: 4px;
  background: linear-gradient(90deg, #eee 25%, #f5f5f5 50%, #eee 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.6s ease-in-out infinite;
}

@keyframes skeleton-shimmer {
  to { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .skeleton-line {
    animation: none;
    background: #eee;
  }
}

The container carries the busy state, the shapes are hidden from assistive technology, and the shimmer stops entirely for readers who asked for less motion.