スケルトン→本文クロスフェード
スケルトンと本文を同じグリッドセルに重ねて置き、読み込み完了で不透明度だけを入れ替える。要素の差し替えをしないのでレイアウトシフトが起きない。
プレビュー
クリック
操作クリック／タップで動きます。
デザインの要点
- スケルトンと本文を grid-area: 1 / 1 で重ねる。display の切替は高さが一瞬 0 になり、下の要素が跳ねる
- 本文の行数・画像の比率をスケルトンと揃える。骨組みと実物の高さが違うと、フェードの最中にずれが見える
- フェードは 250ms。長くすると「まだ読み込み中」に見え、短すぎると点滅に見える
- 読み込みが 300ms 未満で終わるならスケルトンを出さない。一瞬だけ出る骨組みは、遅く感じさせる
コード（コピーして使えます）
<div class="sk2-wrap">
<article class="sk2-card" id="sk2Card" aria-busy="false">
<div class="sk2-layer sk2-skel" aria-hidden="true">
<div class="sk2-b sk2-b-img"></div>
<div class="sk2-b sk2-b-line" style="width:70%"></div>
<div class="sk2-b sk2-b-line" style="width:95%"></div>
<div class="sk2-b sk2-b-line" style="width:60%"></div>
<div class="sk2-b sk2-b-line" style="width:45%"></div>
<div class="sk2-b sk2-b-btn"></div>
</div>
<div class="sk2-layer sk2-real">
<div class="sk2-img"></div>
<h3 class="sk2-title">春の新作テーブル、受注開始</h3>
<p class="sk2-text">ナラ材の一枚板を使った 4 人掛け。脚の位置を 2 段階で選べます。</p>
<p class="sk2-meta">¥168,000 ・ 納期 6 週間</p>
<span class="sk2-cta">詳細を見る</span>
</div>
</article>
<button class="sk2-btn" id="sk2Reload" type="button">再読み込み</button>
</div>