[JS]Googleのようなローディングを表示するスクリプト

4webbyのエントリーから、Googleのようなローディングを表示するスクリプトの紹介です。

How to build a Google like Ajax loader: the red loading… bar
デモページ

Googleのように、AJAXを使用した別コンテンツのローディング時に「Loading content…」と書かれたバーを表示するには、下記のコードを使用します。

ローディングバーのCSS

#loading{
	position: fixed;
	top: 0;
	left: 0;
	z-index: 5000;
	background-color: red;
	font-size: 150%;
	color: white;
	padding: 2px;
}

ローディングバーを呼び出すJavaScript

$(document).ready(function(){
	$(”#loading”).bind(”ajaxSend”, function(){
		$(this).show();
	}).bind(”ajaxComplete”, function(){
		$(this).hide();
	});
})

※jquery.jsを外部ファイルとして使用します。

Post on:2008年2月20日