스켈레톤 스크린

<div class="card">
  <div class="row">
    <div class="av sk" id="av"></div>
    <div class="col">
      <div class="ln title sk" id="t1"></div>
      <div class="ln sub sk" id="t2"></div>
    </div>
  </div>
  <div class="ln body sk" id="b1"></div>
  <div class="ln body short sk" id="b2"></div>
</div>

.card{width:78%;max-width:280px;padding:16px;border-radius:14px;border:1px solid var(--line);background:var(--surface);display:grid;gap:10px}
.row{display:flex;gap:10px;align-items:center}
.col{flex:1;display:grid;gap:6px}
.av{width:38px;height:38px;border-radius:50%}
.ln{height:9px;border-radius:4px}
.title{width:60%}
.sub{width:40%}
.body{width:100%}
.short{width:70%}
.sk{background:linear-gradient(90deg,var(--line) 25%,var(--surface) 50%,var(--line) 75%);background-size:200% 100%;animation:shimmer 1.2s linear infinite}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.done{animation:none !important;background:none !important}
.av.done{background:var(--accent) !important}
.title.done{background:var(--fg) !important;opacity:.85}
.sub.done,.body.done{background:var(--muted) !important;opacity:.6}

const ids = ['av','t1','t2','b1','b2'];
const els = ids.map(id => document.getElementById(id));
let done = false;
setInterval(() => {
  done = !done;
  els.forEach(e => e.classList.toggle('done', done));
}, 1800);