このページの中身

スケルトン読み込み

状態 ／ パターン集トップ

読み込み中の占位。形だけ先に見せて待ち時間を短く感じさせる

プレビュー#

この枠の中は出発点のCSSの上で動いています。下のコードは、そちらを先に貼ってから足してください。

調整する#

コピーする#

上のプレビューでつまみを動かし、「生成する」で調整を反映したコードを作ってからコピーしてください。下の欄は生成の元になる型で、直接コピーするものではありません。

<!-- ロールを持たない div への aria-label は、支援技術が読み飛ばす。
     role="status" を足して、はじめて「読み込み中」が名前として届く -->
<div class="skeleton" role="status" aria-busy="true" aria-label="読み込み中">
  <div class="skeleton__line skeleton__line--lg"></div>
  <div class="skeleton__line"></div>
  <div class="skeleton__line"></div>
  <div class="skeleton__line skeleton__line--short"></div>
</div>
.skeleton {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}
.skeleton__line {
  block-size: 1em;
  border-radius: 0;
  background: linear-gradient(90deg, var(--color-border) 25%, color-mix(in srgb, var(--color-border) 50%, var(--color-bg)) 50%, var(--color-border) 75%);
  background-size: 200% 100%;
  /* 待っているあいだ繰り返す動き。--dur-fast / --dur-base / --dur-slow は
     操作に伴う遷移の値なので、ここでは使わない。1往復が速いほど、
     待たせている合図ではなく落ち着かない明滅になる */
  animation: skeleton-shimmer 1.6s linear infinite;
}
.skeleton__line--lg {
  inline-size: 60%;
  block-size: 1.4em;
}
.skeleton__line--short {
  inline-size: 40%;
}
@keyframes skeleton-shimmer {
  from {
    background-position: 200% 0;
  }
  to {
    background-position: -200% 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .skeleton__line {
    animation: none;
    background: var(--color-border);
  }
}

確認する#

関連#

この資料は、Webサイトを作るときに引くためのものです。 何のために作ったか。作っているのは AK²Lab。