ローディングのくるくるアニメーションのためにdivを何個も使いたくない
CSSのみでアニメーションを表現するのが当たり前になってきましたね。
ローディングみたいに文書に関係ない部分にリソースを割かなくて済む、画像を用意したり読み込む必要がないのが利点ですが、ジェネレータなどで生成したり、どこかのスニペットを持ってくるとやたらdivがいっぱいあったり、要素にいちいちclassがついていたりするのが嫌でした。
そして、たったひとつのdivで麻雀牌も描画できるCSSすごいとかMilkcocoaのドットをbox-shadowで作ってみようとした話といった記事で紹介しているように、私は今、なんでもbox-shadowで描画することにハマっています。
なんだかんだもう今年はずっとこの手法を使ってる気がします。
そう、
box-shadowさえあれば、ローディングのくるくるがdivいっこで実現できる！
See the Pen just one div loading animation by natsumi (@mayo31) on CodePen.18228
（ベンダープレフィクスついてないのでChromeで確認してください）
「ソース見ればわかる」と言いたくなるくらい簡単ですね！
divそのものはドットひとつぶんの円で、画面の中心に配置しています。
そのbox-shadowを周囲にずらして配置して、あとはtransform:rotate();でdivを回転させるだけ！
animationの指定のコツとしては、steps(n)を使う、ってところでしょうか。
指定した秒数の中で、このステップの回数に分けてアニメーションが進行します。
今回のサンプルだとドットが12個なので、引数に12を指定してやれば、12回にわけて360度回転していく、ってことですね。
divたくさん作ってひとつずつ位置をずらして…なんてしなくていいし、キーフレームでいちいちドットの色をひとつずつ変えて…とかもしなくていいし、「12％のときはこの角度で～…」なんて考えなくていいんですぅ(*´з`)
ウィンドウのど真ん中だけじゃない！活用方法
たとえばdivを用意しなくても、コンテンツ枠のsectionだとかにclassをつけておき、そのclassの:after疑似要素などをローディングのくるくるにしちゃう。
コンテンツを読み込み終わってからclassを外せば、:after疑似要素が消えるので、その時点でコンテンツを表示、なんてこともできます。
無駄なhtml要素を増やさなくてもいいですね。
サイズの大きい画像をたくさんリスト表示するギャラリーとかなら、最初は画面外（left:-1000%;とか。）にコンテンツを飛ばしておいて、画像を読み込み終わってコンテンツの高さが算出されたあとでstaticに戻す。
これをすることで読み込み中にコンテンツの枠がガクガクするのも防げるし、中途半端な画像を見せずにすむのでユーザのストレスが軽減できます。
しかも、切り替わるまでの間はコンテンツの高さが変わらないので、ページをスクロールしている途中に画像が出てきたぶんだけガガガガッとずれる、あのイライラからも解放されます。
私は変に遅延させた表現（画像をぼかしたり、黒いオーバーレイかぶせたり）をされるよりも、この方法のほうが好きです。
くるくるが消えると同時にヽ(ﾟ∀ﾟ)ﾉ ﾊﾟｯ☆とコンテンツが表示されると気持ちいいですよ。
単純にコードを減らしたりファイルを圧縮するだけじゃなくて、こういうところを工夫すれば、同じ時間だけ待たせてもユーザの体感を向上させられます。
2015.10.29追記
同じbox-shadow活用でもう一個作りました。
これはsteps(n)じゃなくてlinearです。
See the Pen just one div animation 2 by natsumi (@mayo31) on CodePen.18228