ここ数年、ローディングにスケルトンスクリーンと呼ばれる手法が使われることが多くなってきました。
どんな感じのものかというと下記のような感じです。

See the Pen Skeleton Screen by Nobuyuki Kondo (@artprojectteam) on CodePen.dark

FacebookやYoutubeなどで見かけたことがあると思います。
今回はこのスケルトンスクリーンのメリットと作り方を紹介します。

スケルトンスクリーンを導入するメリット

ローディングはスピナー(ぐるぐる回ってるやつ)やテキストエフェクト、プログレスバーが主流です。
これらは汎用性が高いのでいたるところで使えます。

スケルトンスクリーンの場合は最終的に表示するUIをベースにするため、ユーザーにとってはそこにどんな情報が入るのかが推測しやすくなります。

See the Pen spinner or skeleton by Nobuyuki Kondo (@artprojectteam) on CodePen.dark

上記サンプルのようにスピナーだと何が表示されるか分かりづらいですが、スケルトンスクリーンだと画像、タイトル、テキストのカードが入るというのがわかり、多少コンテンツの表示を待っている感が薄らぎます

スケルトンスクリーンの作り方

• 矩形or円でレイアウトを作る
• 疑似要素であるbeforeかafterで薄い白のグラデーション背景を作る(ブラウザによっては表示されないので注意)
• 疑似要素をアニメーションする際に親要素からはみ出る部分を見せないために、親要素にはoverflow:hiddenをセットする
• キーフレームアニメーションで永遠に動かす

See the Pen one skeleton screen by Nobuyuki Kondo (@artprojectteam) on CodePen.dark

まとめ

CSS自体はそんなに難しくないのでアニメーションに関する部分は汎用的に作れますが、レイアウトに関しては場所場所で違うので、アニメーション部分のみ汎用的に使えるようにしておくと良いです。