Shimmer sweeps across placeholders.
1. Shimmer lines
Mimic text lines and avatar circle.
.skeleton {
background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
background-size: 200% 100%;
animation: shimmer 1.2s infinite;
}
@keyframes shimmer {
to { background-position: -200% 0; }
}2. Pulse opacity
Simpler alternate for reduced GPU use.
Opacity pulses instead of shimmer.
@keyframes pulse {
50% { opacity: 0.5; }
}
.block {
animation: pulse 1.5s ease-in-out infinite;
}3. Match final layout
Skeleton reduces layout shift when content arrives.
Three tiles like a product grid.
.skel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }Frequently asked questions
- Skeleton vs spinner?
- Skeletons preview layout; spinners suit unknown wait time or small buttons.
- Accessibility of skeletons?
- Mark busy regions with aria-busy=true and replace with content when loaded.
- Dark mode skeletons?
- Use darker grays (#334155 base) on dark surfaces.