Shimmer Skeleton

Live preview — fully interactive

The prompt

Build a three-card shimmer skeleton.

## Structure
- 420px stack of 3 cards
- Each card: 44px circular avatar + title bar (55% width) + two text bars (100% / 72%)

## Animation
- Shared .bone gradient: #17171f → #23232e → #2c2c3a → #23232e → #17171f
- background-size 200% 100%
- Animate background-position 100% → -100% over 1.4s ease-in-out infinite

## Design tokens
- Page #08080d, card #101018, border #23232e, radius 14px

## Constraints
- Single HTML file, CSS only, no JavaScript

The code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body { background: #08080d; min-height: 100vh; display: flex; align-items: center; justify-content: center; font-family: Inter, system-ui, sans-serif; }
  .list { display: grid; gap: 16px; width: min(420px, 92vw); }
  .card { display: flex; gap: 14px; padding: 16px; border-radius: 14px; background: #101018; border: 1px solid #23232e; }
  .bone {
    background: linear-gradient(90deg, #17171f 0%, #23232e 40%, #2c2c3a 50%, #23232e 60%, #17171f 100%);
    background-size: 200% 100%;
    animation: shimmer 1.4s ease-in-out infinite;
  }
  @keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
  .avatar { width: 44px; height: 44px; border-radius: 50%; flex: none; }
  .col { flex: 1; }
  .t { height: 12px; border-radius: 6px; width: 55%; }
  .l1 { height: 10px; border-radius: 6px; width: 100%; margin-top: 10px; }
  .l2 { height: 10px; border-radius: 6px; width: 72%; margin-top: 8px; }
</style>
</head>
<body>
<div class="list">
  <div class="card"><div class="bone avatar"></div><div class="col"><div class="bone t"></div><div class="bone l1"></div><div class="bone l2"></div></div></div>
  <div class="card"><div class="bone avatar"></div><div class="col"><div class="bone t"></div><div class="bone l1"></div><div class="bone l2"></div></div></div>
  <div class="card"><div class="bone avatar"></div><div class="col"><div class="bone t"></div><div class="bone l1"></div><div class="bone l2"></div></div></div>
</div>
</body>
</html>

About this effect

A free, production-ready skeleton: avatar, title bar, and two text bars, repeated three times. A single shimmer gradient sweeps across every bone. Drop it in while real data loads.