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

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

イメージ

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

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

NETEYE Activity Indicator

NETEYE Activity Indicator っていうプラグインがそれです。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 でも動くとか!いい時代になったもんだ~。

  • このエントリーをはてなブックマークに追加

この記事を読んだ人にオススメ