[JS]アニメーションの種類も豊富なローディング用プラグインfakeLoader.js

jQueryプラグイン・ライブラリ

2015.02.022024.09.01

ページ読み込み時のローディングを簡単に実装できるjQueryプラグインfakeLoader.jsのご紹介です。

fakeLoader.jsにはローディングのアニメーションが最初から7種類用意されており、またローディング画面の表示時間や背景色などの設定も可能ですので、非常に便利なプラグインではないかと思います。

fakeLoader.js のダウンロード
fakeLoader.js の利用

fakeLoader.js のダウンロード

以下のページからfakeLoader.jsファイルをダウンロードします。
fakeLoader.js

fakeLoader.js の利用

fakeLoader.js-master.zipを展開して、fakeLoader.css、fakeLoader.min.js のファイルをサーバーにアップします。

Javascript

<head>に以下の記述を追加します。
※<script>の読み込みは</body>タグの直前でも構いません。

<link rel="stylesheet" href="./fakeLoader.js/fakeLoader.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="./fakeLoader.js/fakeLoader.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$(".fakeloader").fakeLoader();
});
</script>

$(document).ready(function(){

$(".fakeloader").fakeLoader();

});

</script>

fakeLoader.jsのオプション

fakeLoader.jsにで利用できる主なオプションは以下の通りです。

<script type="text/javascript">
$(document).ready(function(){
	$(".fakeloader").fakeLoader({
		timeToHide:1200,
		zIndex:"999",
		spinner:"spinner1",
		bgColor:"#2ecc71",
		imagePath:"../img/customizedImage.gif"
	});
});
</script>

$(document).ready(function(){

$(".fakeloader").fakeLoader({

timeToHide:1200,

zIndex:"999",

spinner:"spinner1",

bgColor:"#2ecc71",

imagePath:"../img/customizedImage.gif"

});

</script>

各オプションの説明は以下のようになります。

timeToHide	ローディング表示時間（初期値は1200）
zIndex	ローディング画面のz-indexの値（初期値はz-index:999）
spinner	ローディングのアニメーション spinner1、spinner2、spinner3、spinner4、spinner5、spinner6、spinner7 の7種類あります。初期値はspinner1です。 ※各アニメーションについては、ページ下部よりデモページをご確認願います。
bgColor	ローディング画面の背景色
imagePath	オリジナルのローディング画像があれば、画像パスを指定します。ローディング画像を持っていなければ、指定する必要はありません。