Webアプリケーション化が進み、Ajaxを使ってデータを取得したりJavaScriptで画面を再描画するようになると、その処理途中にユーザに触って欲しくないことが増えます。特にフォーム送信の二重処理は厄介です。 そこでボタンを一時的に無効にしたり、処理中である旨を通知する必要が出てきます。そのためのライブラリがwhirlです。

whirlの使い方

whirlには様々なデザインが用意されています。

スタンダード。

トラディショナル。

ダブルアップ。

デュオ。

スフィア。月の満ち欠けに近い感じです。

バー。上または横からバーがアニメーションしてきます。

シャドーオーバーライト。斜めのアニメーションです。

ブレイド。小さな円弧がアニメーションする変わったローディングです。

リング。

ヘリコプター。

whirlの良いところは画像ではなくCSSだけでアニメーションを表現しているという点です。わざわざ画像をアップロードする必要もないのでwhirlだけで素早くローディングアニメーションが実現できます。

使い方としてもクラスを追加したり、表示するだけで使えますので手軽です。

<div class="whirl duo">
  This content is taking ages to load.
</div>

こんな感じでクリックされたくない要素をwhirlで囲みます。

whirlはCSS3製のオープンソース・ソフトウェア(MIT License)です。

whirl | pure CSS loading animations with minimal effort! jh3y/whirl