Image Gallery Skeleton: Pure CSS Loading Animation

Image Gallery Skeleton

A bento photo grid of tiles, each marked with a small mountain-and-sun image glyph, that twinkle on their own offsets and speeds instead of one uniform shimmer. Good for galleries and media pickers.

Also known as: image grid skeleton, photo gallery placeholder, bento grid skeleton.

Color Size 64px Dark background

HTML

<div class="ldr-skeleton-gallery" role="status" aria-label="Loading content">
  <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
</div>

CSS

.ldr-skeleton-gallery {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: calc(var(--s) * 0.92);
  gap: calc(var(--s) / 8);
  width: calc(var(--s) * 6);
}
.ldr-skeleton-gallery span {
  position: relative;
  display: grid;
  place-items: center;
  border-radius: calc(var(--s) / 8);
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 20%, transparent);
  animation: ldr-skeleton-gallery-twinkle var(--dur, 2.4s) ease-in-out var(--d, 0s) infinite;
}
.ldr-skeleton-gallery span::before {
  content: "";
  width: calc(var(--s) * 0.46);
  height: calc(var(--s) * 0.3);
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 30%, transparent);
  clip-path: polygon(0 100%, 34% 22%, 54% 60%, 70% 38%, 100% 100%);
}
.ldr-skeleton-gallery span::after {
  content: "";
  position: absolute;
  top: calc(50% - var(--s) * 0.24);
  left: calc(50% + var(--s) * 0.08);
  width: calc(var(--s) * 0.12);
  height: calc(var(--s) * 0.12);
  border-radius: 50%;
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 30%, transparent);
}
.ldr-skeleton-gallery span:nth-child(1) { grid-area: span 2 / span 2; --d: -0.4s; --dur: 2.8s; }
.ldr-skeleton-gallery span:nth-child(1)::before { transform: scale(1.6); }
.ldr-skeleton-gallery span:nth-child(1)::after { transform: translate(calc(var(--s) * 0.08), calc(var(--s) * -0.1)) scale(1.6); }
.ldr-skeleton-gallery span:nth-child(2) { --d: -1.3s; --dur: 2.2s; }
.ldr-skeleton-gallery span:nth-child(3) { --d: -0.2s; --dur: 2.6s; }
.ldr-skeleton-gallery span:nth-child(4) { --d: -1.9s; --dur: 2.3s; }
.ldr-skeleton-gallery span:nth-child(5) { --d: -0.9s; --dur: 2.9s; }
.ldr-skeleton-gallery span:nth-child(6) { --d: -1.6s; --dur: 2.5s; }
.ldr-skeleton-gallery span:nth-child(7) { grid-column: span 2; --d: -0.7s; --dur: 2.2s; }
.ldr-skeleton-gallery span:nth-child(8) { --d: -2.2s; --dur: 2.7s; }
@keyframes ldr-skeleton-gallery-twinkle {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}

@media (prefers-reduced-motion: reduce) {
  .ldr-skeleton-gallery, .ldr-skeleton-gallery *, .ldr-skeleton-gallery::before, .ldr-skeleton-gallery::after, .ldr-skeleton-gallery *::before, .ldr-skeleton-gallery *::after {
    animation-duration: 3s;
  }
}

Tailwind CSS version

The same loader using only Tailwind's built-in animation utilities. No custom keyframes or config needed.

<div class="grid w-72 auto-rows-[44px] grid-cols-4 gap-1.5 text-gray-300" role="status" aria-label="Loading content">
  <div class="col-span-2 row-span-2 grid animate-pulse place-items-center rounded-lg bg-gray-200 [animation-delay:-0.4s]"><svg class="h-8 w-11" viewBox="0 0 28 20" fill="currentColor"><path d="M0 20 9 5l6 10 4-6 9 11z"/><circle cx="22" cy="3" r="3"/></svg></div>
  <div class="grid animate-pulse place-items-center rounded-lg bg-gray-200 [animation-delay:-1.3s]"><svg class="h-4 w-6" viewBox="0 0 28 20" fill="currentColor"><path d="M0 20 9 5l6 10 4-6 9 11z"/><circle cx="22" cy="3" r="3"/></svg></div>
  <div class="grid animate-pulse place-items-center rounded-lg bg-gray-200 [animation-delay:-0.2s]"><svg class="h-4 w-6" viewBox="0 0 28 20" fill="currentColor"><path d="M0 20 9 5l6 10 4-6 9 11z"/><circle cx="22" cy="3" r="3"/></svg></div>
  <div class="grid animate-pulse place-items-center rounded-lg bg-gray-200 [animation-delay:-1.9s]"><svg class="h-4 w-6" viewBox="0 0 28 20" fill="currentColor"><path d="M0 20 9 5l6 10 4-6 9 11z"/><circle cx="22" cy="3" r="3"/></svg></div>
  <div class="grid animate-pulse place-items-center rounded-lg bg-gray-200 [animation-delay:-0.9s]"><svg class="h-4 w-6" viewBox="0 0 28 20" fill="currentColor"><path d="M0 20 9 5l6 10 4-6 9 11z"/><circle cx="22" cy="3" r="3"/></svg></div>
  <div class="grid animate-pulse place-items-center rounded-lg bg-gray-200 [animation-delay:-1.6s]"><svg class="h-4 w-6" viewBox="0 0 28 20" fill="currentColor"><path d="M0 20 9 5l6 10 4-6 9 11z"/><circle cx="22" cy="3" r="3"/></svg></div>
  <div class="col-span-2 grid animate-pulse place-items-center rounded-lg bg-gray-200 [animation-delay:-0.7s]"><svg class="h-4 w-6" viewBox="0 0 28 20" fill="currentColor"><path d="M0 20 9 5l6 10 4-6 9 11z"/><circle cx="22" cy="3" r="3"/></svg></div>
  <div class="grid animate-pulse place-items-center rounded-lg bg-gray-200 [animation-delay:-2.2s]"><svg class="h-4 w-6" viewBox="0 0 28 20" fill="currentColor"><path d="M0 20 9 5l6 10 4-6 9 11z"/><circle cx="22" cy="3" r="3"/></svg></div>
</div>

Customizing this loader

Color: set --ldr-color on the element or a parent. Currently previewing #3b82f6.
Size: set --ldr-size. Every dimension in the snippet is derived from it. Currently previewing 64px.
Speed: change the duration on the animation shorthand. Delays on the children are relative, so they keep their rhythm.
Accessibility: the root carries role="status" and an aria-label so screen readers announce the wait. The reduced-motion rule at the end slows the animation for users who asked for less motion.

Image Gallery Skeleton

HTML

CSS

Tailwind CSS version

Customizing this loader

Similar loaders