Skeleton

Usage

Use skeletons while the first load of a content area is in flight: the vehicle list, a work order card, the service history table. Matching the final layout keeps the page from jumping when data arrives.

• Match the real geometry: same number of rows a page usually shows, line widths that vary like real text, avatar circles where avatars go.
• For actions that the user started (saving, assigning), use a spinner or the button's loading state. For long measurable tasks, a progress bar.
• If loading takes longer than ~10 seconds, replace the skeleton with a message ("Still loading vehicles — the telematics service is slow").

Anatomy

1. Group — .skeleton-group[aria-busy="true"] around the loading area
2. Status — one visually hidden role="status" ("Loading vehicles…")
3. Blocks — .skeleton shapes inside an aria-hidden="true" wrapper

Examples

<div class="skeleton-group" aria-busy="true">
  <span class="sr-only" role="status">Loading vehicle KX-24…</span>
  <div class="skeleton-card" aria-hidden="true">
    <span class="skeleton skeleton--media"></span>
    <span class="skeleton skeleton--heading"></span>
    <span class="skeleton skeleton--text"></span>
    <span class="skeleton skeleton--text skeleton--w-60"></span>
  </div>
</div>
<!-- When data arrives: replace the group's content, remove aria-busy -->

API

Do and don't

Accessibility

• The loading region gets aria-busy="true"; remove it when content arrives.
• Blocks are inside an aria-hidden="true" wrapper; a single visually hidden role="status" says what's loading.
• Not focusable; there is nothing to operate.
• Reduced motion stops the shimmer (WCAG 2.2.2: nothing moves longer than 5 seconds without a way to stop it).
• Forced colors: blocks are drawn with a GrayText outline so the layout stays visible.

Tokens