Skeleton shimmer
Grey placeholder shapes with a light band sweeping across, standing in for content that is still loading.
CSSBeginner
<div class="card" aria-busy="true">
<div class="row"><div class="sk avatar"></div><div style="flex:1;display:grid;gap:8px"><div class="sk l1"></div><div class="sk l2"></div></div></div>
<div class="sk img"></div><div class="sk l3"></div><div class="sk l4"></div>
</div>.card{width:min(340px,88vw);padding:18px;border-radius:14px;background:#1f0f0e;border:1px solid #3a2220;display:grid;gap:12px}
.row{display:flex;gap:12px;align-items:center}
.sk{background:linear-gradient(100deg,#2e1b19 30%,#4a2e2a 50%,#2e1b19 70%);background-size:300% 100%;animation:shimmer 1.4s linear infinite;border-radius:8px}
.avatar{width:48px;height:48px;border-radius:50%;flex:none}
.l1{height:14px;width:70%}.l2{height:12px;width:45%}.img{height:120px;border-radius:12px}.l3{height:12px;width:90%}.l4{height:12px;width:65%}
@keyframes shimmer{from{background-position:100% 0}to{background-position:-100% 0}}
@media (prefers-reduced-motion:reduce){.sk{animation:none}}<!doctype html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Skeleton shimmer</title>
<style>
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{display:grid;place-items:center;background:#140807;color:#fffffc;font:16px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif}
.card{width:min(340px,88vw);padding:18px;border-radius:14px;background:#1f0f0e;border:1px solid #3a2220;display:grid;gap:12px}
.row{display:flex;gap:12px;align-items:center}
.sk{background:linear-gradient(100deg,#2e1b19 30%,#4a2e2a 50%,#2e1b19 70%);background-size:300% 100%;animation:shimmer 1.4s linear infinite;border-radius:8px}
.avatar{width:48px;height:48px;border-radius:50%;flex:none}
.l1{height:14px;width:70%}.l2{height:12px;width:45%}.img{height:120px;border-radius:12px}.l3{height:12px;width:90%}.l4{height:12px;width:65%}
@keyframes shimmer{from{background-position:100% 0}to{background-position:-100% 0}}
@media (prefers-reduced-motion:reduce){.sk{animation:none}}
</style></head>
<body>
<div class="card" aria-busy="true">
<div class="row"><div class="sk avatar"></div><div style="flex:1;display:grid;gap:8px"><div class="sk l1"></div><div class="sk l2"></div></div></div>
<div class="sk img"></div><div class="sk l3"></div><div class="sk l4"></div>
</div>
</body></html>Good for
Cards, lists and profile pages while data loads. Feels faster than a spinner.
Watch out for
Match the skeleton to the real layout so nothing jumps when content arrives.
Accessibility
Wrap motion in @media (prefers-reduced-motion: reduce) and switch it off or shorten it for people who ask for less movement.