← All Examples

Skeleton Loader

Animated placeholder loading state using CSS keyframes.

Published May 19, 2026

Demo

HTML

<div class="skeleton-card">
  <div class="skel skel-avatar"></div>
  <div class="skel skel-line w-full"></div>
  <div class="skel skel-line w-3q"></div>
  <div class="skel skel-line w-half"></div>
</div>

CSS

.skel {
  background: linear-gradient(
    90deg,
    #f0f0f5 25%,
    #e0e0ea 50%,
    #f0f0f5 75%
  );
  background-size: 200% 100%;
  border-radius: 6px;
  animation: shimmer 1.5s infinite;
}

.skel-avatar { width: 44px; height: 44px; border-radius: 50%; }
.skel-line   { height: 12px; margin-bottom: .5rem; }
.w-full  { width: 100%; }
.w-3q    { width: 75%; }
.w-half  { width: 50%; }

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

How it works

The shimmer effect uses a gradient as the background with a very wide background-size (200%). Animating background-position sweeps the lighter band across the element. Each skeleton element is just a <div> with rounded corners — the animation makes them all shimmer in sync.