Skeleton

Placeholder shapes that pulse while content is loading. Pure CSS animation — no JavaScript required.

Component Skill — components/skeleton/component-skill.md

Native basis

CSS @keyframes pulse animation on placeholder <div> elements. No JavaScript required.

Web Platform APIs

@keyframes

Classes

.skeleton .skeleton-round

Accessibility

• Skeleton elements are decorative — screen readers should skip them

• Use aria-hidden="true" on skeleton containers if they sit alongside real content

• Announce the loading state separately with role="status" if needed

Avatar + Text

Common pattern for user profile loading states.

<div style="display:flex;align-items:center;gap:1rem;">
  <div class="skeleton skeleton-round" style="width:2.5rem;height:2.5rem;"></div>
  <div style="display:flex;flex-direction:column;gap:0.5rem;">
    <div class="skeleton" style="height:0.875rem;width:10rem;"></div>
    <div class="skeleton" style="height:0.875rem;width:7rem;"></div>
  </div>
</div>

Card

Skeleton inside a card container.

<div class="skeleton skeleton-round" style="width:2.5rem;height:2.5rem;"></div>
<div class="skeleton" style="height:0.875rem;width:10rem;"></div>

Text Lines

Paragraph placeholder.

CSS view file

Styles for the skeleton component. Uses design tokens for colors, spacing, and radius.

@layer components {
  .skeleton {
    background-color: var(--accent);
    border-radius: var(--radius-md);
    animation: skeleton-pulse 2s ease-in-out infinite;
  }

  .skeleton-round {
    border-radius: 9999px;
  }

  @keyframes skeleton-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
  }
}