これはなに?
表の読み込み中を示すアニメーションをCSS(とSVG)で作りました。
デモ
作ったもの
HTMLとしてはこれだけです。背景をグラデーションにして、アニメさせています。
<div class="loading-placeholder"></div>
CSSのclip-pathで、表のセルっぽく背景色が見えるようにしています。
clip-path: url(#loading-placeholder-mask);
作りたい表の分だけ、SVGが大きくなります。まあこれは仕方ない。
<svg width="0" height="0">
<defs>
<clipPath id="loading-placeholder-mask">
(snip)
</clipPath>
</defs>
</svg>