Card skeleton loading state

Shimmer animation placeholder while content loads.

Widely supported

uianimation

Quick implementation

.skeleton {
  background: linear-gradient(
    90deg,
    oklch(0.9 0.01 260) 25%,
    oklch(0.95 0.01 260) 50%,
    oklch(0.9 0.01 260) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: 0.25rem;
}

.skeleton--line { height: 0.75rem; }
.skeleton--title { height: 1rem; width: 70%; }
.skeleton--avatar { width: 2.5rem; height: 2.5rem; border-radius: 50%; }

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

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; }
}

Prompt this to your LLM

Includes role, constraints, and skeleton variants.

You are a senior frontend engineer building loading states.

Goal: A shimmer skeleton loading placeholder for cards, using CSS only.

Technical constraints:
- Use a linear-gradient with 3 stops as the shimmer effect.
- Animate background-position with @keyframes for the sweep.
- background-size: 200% 100% so the gradient slides through.
- Use oklch() colors — base: oklch(0.9 0.01 260), highlight: oklch(0.95 0.01 260).
- Provide utility classes: .skeleton--line, .skeleton--title (wider), .skeleton--avatar (circle).
- Add @media (prefers-reduced-motion: reduce) to disable animation.
- Include dark-mode variant with darker base colors.

Skeleton card structure:
- Avatar circle
- Title line (70% width)
- Two body lines (100% and 45% width)

Return HTML structure + CSS.

Why this matters

Skeleton screens reduce perceived loading time by showing the shape of content before it arrives. Users perceive them as 30-40% faster than spinners. The shimmer animation signals "loading" without being distracting. Every major platform (YouTube, Facebook, LinkedIn) uses this pattern.

The logic

A three-stop linear-gradient at 90 degrees creates a highlight band. background-size: 200% 100% makes the gradient twice as wide as the element. Animating background-position from 200% 0 to -200% 0 sweeps the highlight across. ease-in-out makes the sweep feel smooth rather than mechanical.

Accessibility & performance

Disable the shimmer animation for prefers-reduced-motion: reduce — the static gray shapes still communicate "loading" without motion. background-position animation is compositor-friendly on most browsers. Keep skeleton layouts close to the real content dimensions to minimize layout shift when content loads.