[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日

top of page

Trackback

leave your Comments

top of page

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

ローディングバーのCSS

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

Related Posts

Trackback

leave your Comments

Subscription

Sponsors

Recnet Entry

Pickup Entry

Archive by month

Category

Blog Info