SnippetCSS
Skeleton Loader
CSS-only skeleton placeholders that respect prefers-reduced-motion.
Explanation
Skeletons reduce layout shift when content loads. Match approximate shape of the final UI. Disable shimmer when users prefer reduced motion.
css
.skeleton {
display: block;
background: linear-gradient(
90deg,
var(--skeleton-base, #e8e6e1) 25%,
var(--skeleton-shine, #f5f3ef) 50%,
var(--skeleton-base, #e8e6e1) 75%
);
background-size: 200% 100%;
animation: skeleton-shimmer 1.2s ease-in-out infinite;
border-radius: 0.375rem;
}
.skeleton--text { height: 0.875rem; margin-bottom: 0.5rem; }
.skeleton--title { height: 1.25rem; width: 60%; margin-bottom: 0.75rem; }
.skeleton--avatar { width: 2.5rem; height: 2.5rem; border-radius: 9999px; }
.skeleton--card { height: 8rem; }
@keyframes skeleton-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
.skeleton { animation: none; background: var(--skeleton-base, #e8e6e1); }
}Usage example
javascript
// While loading
container.innerHTML = skeletonHTML;
container.setAttribute('aria-busy', 'true');
// When ready
container.innerHTML = realHTML;
container.setAttribute('aria-busy', 'false');