jQueryにてボタンを押したら読み込み中にローディング画面表示

レポート処理や何百レコードのデータ更新処理など、重たくなる処理に

ローディング画面表示はひじょうに役立つと思います。

そこで便利なjQueryのライブラリの紹介です。

Activity Indicator

デモやライブラリはこちら。

では早速簡単なデモを作成します。

まず、jQueryとライブラリを読み込み。（ここは各環境によって変更してください。）

<script src="/js/jquery-1.7.1.js" type="text/javascript"></script>
<script src="/js/jquery.activity-indicator-1.0.0.min.js" type="text/javascript"></script>

そしてローディング画面のcssを設定。

#indicator-loading {
width:100%;
height:100%;
position:fixed;
top:0;
left:0;
background:#000;
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
z-index:99;
display:none;
}
.square {
width:100%;
height:100%;
color: #000;
position:fixed;
top:50%;
left:50%;
font-family: Helvetica, Arial, Sans-Serif;
z-index:100;
}

ローディング処理を行う関数をjavascriptにて作成します。

function do_indicator(){
$('#indicator-loading').show().activity({
segments:12,
width:12,
space:6,
length:28,
color:'#fff',
speed:1.5
});
}

そしてbodyタグのidにindicator-loadingを指定。
※body開始および終了タグの前後をdivなどで区切ってidを付与してもいいでしょう。

<bod id="indicator-loading">
コンテンツ表示
</body>

最後に、aタグなどに上で作成したローディング関数を読み込みます。

<a onClick="javascript:do_indicator();">表示</a>

どうでしたか？ローディング画面が表示されたかと思います。

今回は簡単なデモでしたが、アレンジ頂ければいろいろ使える技になると思います。

ちなみに、activity-indicator.min.jsについては、

初期状態では、chromeに対応していない為

以下の通り修正。（こちらを参考）

初期→ document.styleSheets[0].insertRule(rule);
修正→ document.styleSheets[0].insertRule(rule,document.styleSheets[0].cssRules.length);