ITエンジニア/デザイナ向けにオープンソースを毎日紹介

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

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2