はじめに
Webシステムの構築で使うインジケータ画像が荒かったので、cssで作り直そうと思います。
サンプル
とりあえず、作ってみました。
See the Pen Untitled by masayasu_t (@cjlsrdxi-the-builder) on CodePen.
こだわりポイント
デザインを作るときにspan要素を多用しがちですが、htmlをシンプルにしたかったのでspan要素なしで作りました。
よくある形式
<div class="loading"><span></span><span></span><span></span></div>
今回の形式
<div class="loading"></div>
疑似要素（before、after）を使っても、２要素…インジケータの複数要素をどう表現するか
そこで、「box-shadow」を使いました。
おわりに
「box-shadow」は形を変えられないなど制約はありますが使い勝手はよく、調子に乗ってインジケータをたくさん作ってしまいました。
追記
box-shadowでマリオを作ってみました。
See the Pen Untitled by masayasu_t (@cjlsrdxi-the-builder) on CodePen.