[JS]Googleのようなローディングを表示するスクリプト
Post on:2008年2月20日
sponsors
4webbyのエントリーから、Googleのようなローディングを表示するスクリプトの紹介です。
How to build a Google like Ajax loader: the red loading... bar
デモページ
Googleのように、AJAXを使用した別コンテンツのローディング時に「Loading content...」と書かれたバーを表示するには、下記のコードを使用します。
ローディングバーのCSS
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<textarea name="code" class="css" cols="60" rows="5"> #loading{ position: fixed; top: 0; left: 0; z-index: 5000; background-color: red; font-size: 150%; color: white; padding: 2px; } </textarea> |
ローディングバーを呼び出すJavaScript
|
1 2 3 4 5 6 7 8 9 |
<textarea name="code" class="js" cols="60" rows="5"> $(document).ready(function(){ $("#loading").bind("ajaxSend", function(){ $(this).show(); }).bind("ajaxComplete", function(){ $(this).hide(); }); }) </textarea> |
※jquery.jsを外部ファイルとして使用します。
sponsors
