スケルトンローディング
スケルトンローディングは、データ読み込み中にコンテンツの形だけを灰色のプレースホルダーで先に見せ、待ち時間の体感を和らげる手法です。このサンプルは @keyframes shimmer で背景のグラデーションを横へ流し、光が走るような効果（シマー）を作ります。
解説
スケルトンローディングは、データ読み込み中にコンテンツの形だけを灰色のプレースホルダーで先に見せ、待ち時間の体感を和らげる手法です。このサンプルは @keyframes shimmer で背景のグラデーションを横へ流し、光が走るような効果（シマー）を作ります。各プレースホルダーは linear-gradient と大きめの background-size を持ち、animation で無限ループします。アバター用の丸、見出し・本文用の太さ違いの線など、実際のレイアウトを模した部品で組み立てるのがコツです。CSS のみで動き、JavaScript は不要です。
使う場面
- 記事一覧やカード一覧の読み込み中表示
- SNS や通知フィードの初回ロード
- API からのデータ取得を待つダッシュボード
線の本数や長さは skel--line-lg などのクラスを増減して、実際に表示される要素の形に近づけます。色はグラデーションの3色を変えれば、ダークテーマにも対応できます。シマーの速さは shimmer の 1.4s で調整可能です。点滅が苦手なユーザーに配慮し、prefers-reduced-motion でアニメーションを止める分岐を用意すると親切です。実データが届いたらこの要素を本物のコンテンツへ差し替えます。
よくある質問
ぐるぐる回るスピナーと比べてどんな利点がありますか？
スケルトンは表示される内容の形をあらかじめ示すため、ユーザーが次に何が出るか予測でき、待ち時間が短く感じられます。レイアウトの位置も先に確保できるので、読み込み完了時のガタつきも防げます。
色をダークモードに合わせたいです。
CSSのlinear-gradientに指定した3つの灰色を、暗い背景になじむ濃いグレーに変えてください。ベース色と少し明るいハイライト色のコントラストを保つと、シマーの動きがきれいに見えます。