[jQuery] いつでもどこでもローディングアイコンを表示 NETEYE Activity Indicator

最近目がかゆくてやたらとクシャミが出るんですけど、PM2.5 ってホント迷惑ですね～。みなさん、こんにちは nakamura です。

最近ちょっとおぉ！と思った jQuery プラグインがあったので今日はそのご紹介です。Ajax を使った非同期な処理も今やすっかり定番ですが、毎回メンドクサイな～と思うのがローディングアイコン。アニメーション Gif を用意して、どこで呼び出しても見栄えがするように CSS 調整して・・・。あーもうしゃらくせえ！と思っていたら、その辺全部勝手にやってくれる jQuery プラグインがあったんですね～。

NETEYE Activity Indicator

NETEYE Activity Indicator っていうプラグインがそれです。github で公開されてます。

• NETEYE Activity Indicator
• jquery-plugins/activity-indicator at master · neteye/jquery-plugins · GitHub

使い方

jQuery 1.4.2 以上でないと動きません。以下の要領で必要な JS ファイルを読み込んだら、

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="/js/jquery.activity-indicator-1.0.0.min.js"></script>

こんな感じで動きます。ザ簡単！

$('.activity').click(function(){
    $('.form-wrapper').activity();
    $.ajax({
        // Ajax 処理をつらつらと
    });
});

オプションも色々 あるので用途にあわせて適宜設定してあげてください。

終わりに

仕組み的には SVG や VML を使って描画しているので画像も不要、しかもなんと IE6 でも動くとか！いい時代になったもんだ～。