Product Grid Skeleton
Three product cards with image, title, price and cart button. One mask gradient on the wrapper sweeps a single bright wave across all of them at once, instead of a shimmer per box.
Also known as: product card skeleton, ecommerce grid placeholder, wave shimmer skeleton.
HTML
<div class="ldr-skeleton-product-grid" role="status" aria-label="Loading content"> <div class="ldr-skeleton-product-grid-card"><span class="ldr-skeleton-product-grid-img"></span><span></span><span></span><span class="ldr-skeleton-product-grid-foot"><span></span><span></span></span></div> <div class="ldr-skeleton-product-grid-card"><span class="ldr-skeleton-product-grid-img"></span><span></span><span></span><span class="ldr-skeleton-product-grid-foot"><span></span><span></span></span></div> <div class="ldr-skeleton-product-grid-card"><span class="ldr-skeleton-product-grid-img"></span><span></span><span></span><span class="ldr-skeleton-product-grid-foot"><span></span><span></span></span></div> </div>
CSS
.ldr-skeleton-product-grid {
--s: var(--ldr-size, 48px);
--c: var(--ldr-color, #3b82f6);
--wave: linear-gradient(105deg, rgb(0 0 0 / 0.5) 38%, #000 50%, rgb(0 0 0 / 0.5) 62%) 100% 0 / 300% 100%;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: calc(var(--s) / 5);
width: calc(var(--s) * 6.4);
-webkit-mask: var(--wave);
mask: var(--wave);
animation: ldr-skeleton-product-grid-wave 1.8s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
.ldr-skeleton-product-grid-card {
display: flex;
flex-direction: column;
gap: calc(var(--s) / 8);
padding: calc(var(--s) / 8);
border: 1px solid color-mix(in srgb, var(--ldr-color, #3b82f6) 32%, transparent);
border-radius: calc(var(--s) / 6);
}
.ldr-skeleton-product-grid-card > span {
height: calc(var(--s) / 6);
border-radius: var(--s);
background: color-mix(in srgb, var(--ldr-color, #3b82f6) 38%, transparent);
}
.ldr-skeleton-product-grid-card > span:nth-child(3) { width: 62%; }
.ldr-skeleton-product-grid-card > .ldr-skeleton-product-grid-img {
height: calc(var(--s) * 1.45);
margin-bottom: calc(var(--s) / 16);
border-radius: calc(var(--s) / 10);
}
.ldr-skeleton-product-grid-card > .ldr-skeleton-product-grid-foot {
display: flex;
align-items: center;
justify-content: space-between;
height: auto;
margin-top: calc(var(--s) / 16);
background: none;
}
.ldr-skeleton-product-grid-foot span {
width: 42%;
height: calc(var(--s) / 4.5);
border-radius: calc(var(--s) / 16);
background: color-mix(in srgb, var(--ldr-color, #3b82f6) 38%, transparent);
}
.ldr-skeleton-product-grid-foot span + span {
width: calc(var(--s) / 2.6);
height: calc(var(--s) / 2.6);
border-radius: 50%;
}
@keyframes ldr-skeleton-product-grid-wave {
to { -webkit-mask-position: 0% 0; mask-position: 0% 0; }
}
@media (prefers-reduced-motion: reduce) {
.ldr-skeleton-product-grid, .ldr-skeleton-product-grid *, .ldr-skeleton-product-grid::before, .ldr-skeleton-product-grid::after, .ldr-skeleton-product-grid *::before, .ldr-skeleton-product-grid *::after {
animation-duration: 3s;
}
}Customizing this loader
- Color: set
--ldr-coloron the element or a parent. Currently previewing#3b82f6. - Size: set
--ldr-size. Every dimension in the snippet is derived from it. Currently previewing64px. - Speed: change the duration on the
animationshorthand. Delays on the children are relative, so they keep their rhythm. - Accessibility: the root carries
role="status"and anaria-labelso screen readers announce the wait. The reduced-motion rule at the end slows the animation for users who asked for less motion.