Product Page Skeleton: Pure CSS Loading Animation

Product Page Skeleton

A product detail page: hero image and thumbnail strip on the left; title, star rating, price, color swatches and buy row on the right. The shimmer passes the image first, then the details.

Also known as: product detail skeleton, ecommerce product placeholder, shop page skeleton.

Color Size 64px Dark background

HTML

<div class="ldr-skeleton-product-page" role="status" aria-label="Loading content">
  <div class="ldr-skeleton-product-page-media">
    <span class="ldr-skeleton-product-page-hero"></span>
    <span class="ldr-skeleton-product-page-thumbs"><span></span><span></span><span></span><span></span></span>
  </div>
  <div class="ldr-skeleton-product-page-info">
    <span></span>
    <span></span>
    <span></span>
    <span class="ldr-skeleton-product-page-stars"><span></span><span></span><span></span><span></span><span></span></span>
    <span></span>
    <span class="ldr-skeleton-product-page-swatches"><span></span><span></span><span></span><span></span></span>
    <span class="ldr-skeleton-product-page-buy"><span></span><span></span></span>
  </div>
</div>

CSS

.ldr-skeleton-product-page {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  --bone: linear-gradient(90deg, color-mix(in srgb, var(--ldr-color, #3b82f6) 16%, transparent) 30%, color-mix(in srgb, var(--ldr-color, #3b82f6) 34%, transparent) 50%, color-mix(in srgb, var(--ldr-color, #3b82f6) 16%, transparent) 70%) 100% 0 / 300% 100%;
  display: grid;
  grid-template-columns: calc(var(--s) * 2.8) 1fr;
  gap: calc(var(--s) / 3);
  width: calc(var(--s) * 7);
}
.ldr-skeleton-product-page-media,
.ldr-skeleton-product-page-info {
  display: flex;
  flex-direction: column;
  gap: calc(var(--s) / 8);
}
.ldr-skeleton-product-page-info { --delay: 0.2s; gap: calc(var(--s) / 7); padding-top: calc(var(--s) / 20); }
.ldr-skeleton-product-page :where(span) {
  flex: none;
  border-radius: var(--s);
}
.ldr-skeleton-product-page-hero,
.ldr-skeleton-product-page-thumbs span,
.ldr-skeleton-product-page-info > span:not([class]),
.ldr-skeleton-product-page-swatches span,
.ldr-skeleton-product-page-buy span {
  background: var(--bone);
  animation: ldr-skeleton-product-page-shimmer 1.8s ease-in-out var(--delay, 0s) infinite;
}
.ldr-skeleton-product-page-hero {
  height: calc(var(--s) * 2.3);
  border-radius: calc(var(--s) / 8);
}
.ldr-skeleton-product-page-thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: calc(var(--s) / 9);
}
.ldr-skeleton-product-page-thumbs span {
  aspect-ratio: 1;
  border-radius: calc(var(--s) / 12);
}
.ldr-skeleton-product-page-thumbs span:first-child { box-shadow: 0 0 0 1px color-mix(in srgb, var(--ldr-color, #3b82f6) 60%, transparent); }
.ldr-skeleton-product-page-info > span:nth-child(1) { width: 40%; height: calc(var(--s) / 9); }
.ldr-skeleton-product-page-info > span:nth-child(2) { width: 94%; height: calc(var(--s) / 4); }
.ldr-skeleton-product-page-info > span:nth-child(3) { width: 58%; height: calc(var(--s) / 4); margin-top: calc(var(--s) / -20); }
.ldr-skeleton-product-page-info > span:nth-child(5) { width: 32%; height: calc(var(--s) / 3); border-radius: calc(var(--s) / 14); }
.ldr-skeleton-product-page-stars {
  display: flex;
  gap: calc(var(--s) / 30);
}
.ldr-skeleton-product-page-stars span {
  width: calc(var(--s) / 4.5);
  height: calc(var(--s) / 4.5);
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 40%, transparent);
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.ldr-skeleton-product-page-stars span:last-child { background: color-mix(in srgb, var(--ldr-color, #3b82f6) 16%, transparent); }
.ldr-skeleton-product-page-swatches {
  display: flex;
  gap: calc(var(--s) / 7);
  padding: calc(var(--s) / 30);
}
.ldr-skeleton-product-page-swatches span {
  width: calc(var(--s) * 0.3);
  height: calc(var(--s) * 0.3);
}
.ldr-skeleton-product-page-swatches span:first-child { box-shadow: 0 0 0 calc(var(--s) / 30) transparent, 0 0 0 calc(var(--s) / 15) color-mix(in srgb, var(--ldr-color, #3b82f6) 50%, transparent); }
.ldr-skeleton-product-page-buy {
  display: flex;
  gap: calc(var(--s) / 8);
  margin-top: calc(var(--s) / 20);
}
.ldr-skeleton-product-page-buy span {
  height: calc(var(--s) * 0.5);
  border-radius: calc(var(--s) / 8);
}
.ldr-skeleton-product-page-buy span:first-child { width: calc(var(--s) * 0.9); background: none; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ldr-color, #3b82f6) 32%, transparent); }
.ldr-skeleton-product-page-buy span:last-child { flex: 1; }
@keyframes ldr-skeleton-product-page-shimmer {
  to { background-position: 0% 0; }
}

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

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.

Product Page Skeleton

HTML

CSS

Customizing this loader

Similar loaders