コンテンツ読み込み中のプレースホルダー。グラデーションのbackground-positionを動かして「光が流れる」質感を作ります。
プレビュー枠は右下をドラッグすると高さを変えられます
書き換えるとプレビューに即反映されます。変更はこのページ内だけで、リロードすると元に戻ります。
要素の背景に「地の色→少し明るい色→地の色」の横グラデーションを敷き、background-sizeを400%に拡大してからbackground-positionを100%→0%へ動かすと、光の帯が左から右へ流れて見えます。widthやtransformを動かさないためリフローが起きず、多数のスケルトンを同時に表示しても軽いのが利点です。
実物のレイアウト（アバター+2行）に形を似せるほど、読み込み後の切り替わりが自然に感じられます。