More than 3 years have passed since last update.

[CSS] clip-pathとsvgで作る表っぽい読み込み中プレースホルダ

Last updated at 2021-11-30Posted at 2021-11-30

これはなに？

表の読み込み中を示すアニメーションを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>