Loaders.css – スタイルシートだけで作られたローディングアイコン
WebアプリケーションなどではAjaxを使って通信を行うのが一般的です。そのため、ユーザが処理を待っている間は処理中である旨表示が求められます。そうしないと反応がないと思ってしまって何度もボタンをクリックしたり、ウィンドウを閉じてしまいます。 そこで使ってみたいのがLoaders.cssです。スタイルシートだけで作られたローディングアイコンです。
Loaders.cssの使い方
Loaders.cssでは多数のパターンのローディングアイコンが用意されています。以下はその一覧です。
最後のパックマン風はかなり派手ですね（2つも必要ですし）。その他、好みに応じて選択できるかと思います。スタイルシートであれば色を変えるのも容易でしょう。
使い方としては、
<div class="loader-inner ball-pulse"></div>
のようにクラス指定するだけです。
Loaders.cssを使うと画像リソースを用意することなく使えるので手軽です。デザインのカスタマイズも難しくありませんので、積極的に使っていきたいライブラリですね。
Loaders.cssはCSS3製、MIT Licenseのオープンソース・ソフトウェアです。