whirl – CSSだけで実装されたローディング表示
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