CSSで読み込み中のスケルトン表示を作るには

<div class="card">
  <span class="sr-only" role="status">記事を読み込み中…</span>
  <div class="skeleton skeleton--avatar" aria-hidden="true"></div>
  <div class="card__body" aria-hidden="true">
    <div class="skeleton skeleton--title"></div>
    <div class="skeleton skeleton--text"></div>
    <div class="skeleton skeleton--text skeleton--short"></div>
  </div>
</div>

.card {
  display: flex;
  gap: 12px;
  max-width: 360px;
  padding: 16px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
}
.card__body {
  flex: 1;
}
 
/* 灰色の地に明るい帯を 1 本入れたグラデーションを、要素の 2 倍の幅に広げる */
.skeleton {
  border-radius: 6px;
  background: linear-gradient(90deg, #e2e8f0 25%, #f8fafc 50%, #e2e8f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
}
.skeleton--avatar {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
}
.skeleton--title {
  width: 60%;
  height: 16px;
  margin-bottom: 12px;
}
.skeleton--text {
  height: 12px;
  margin-bottom: 8px;
}
.skeleton--short {
  width: 40%;
}
 
/* 背景の位置をずらして、明るい帯を左から右へ流す */
@keyframes shimmer {
  from {
    background-position: 100% 0;
  }
  to {
    background-position: -100% 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .skeleton {
    animation: none;
    background: #e2e8f0;
  }
}
 
/* 見た目には出さず、読み上げだけに残す */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}