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.