CSS3だけで作れちゃうのが凄いですね！ 処理中にユーザがストレスを感じないように表示されるスピナー。最も簡単なのはアニメーションGIFを表示することかなと思いますが、背景色を微妙に違ったり、大きさを適切に考えないといけないなど画像だけに扱いがちょっと面倒に感じることがあります。 そこで使ってみたいのがSpinKitです。なんとCSS3のアニメーションを使ってスピナーを実現しています。 スクリーンショットでは分かりづらいので動画を撮影しました。

.spinner > div { background-color: #333; height: 100%; width: 6px; display: inline-block;

-webkit-animation: stretchdelay 1.2s infinite ease-in-out; animation: stretchdelay 1.2s infinite ease-in-out; }

.spinner .rect2 { -webkit-animation-delay: -1.1s; animation-delay: -1.1s; }

.spinner .rect3 { -webkit-animation-delay: -1.0s; animation-delay: -1.0s; }

.spinner .rect4 { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; }

.spinner .rect5 { -webkit-animation-delay: -0.8s; animation-delay: -0.8s; }

@-webkit-keyframes stretchdelay { 0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
20% { -webkit-transform: scaleY(1.0) } }

@keyframes stretchdelay { 0%, 40%, 100% { transform: scaleY(0.4) }
20% { transform: scaleY(1.0) } }

scaleYとanimation-delayを組み合わせることで上手に表現しているのが分かるかと思います。他のスピナーも同じようにスタイルシートの妙技によって実現しています。
CSS3限定なのでHTML5をサポートしたブラウザだけになるとは思いますが、スタイルシートであれば大きさや色を自由に設定できますので積極的に使ってみたいテクニックですね。
SpinKitはCSS3製、MIT Licenseのオープンソース・ソフトウェアです。
[SpinKit | Simple CSS Spinners](http://tobiasahlin.com/spinkit/)
[tobiasahlin/SpinKit](https://github.com/tobiasahlin/SpinKit)