• RSS

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

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

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

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

fakeLoader.js のダウンロード

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


fakeLoader.js の利用

fakeLoader.js-master.zipを展開して、fakeLoader.cssfakeLoader.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>

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>

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

HTML

HTMLファイルの<body>タグの直下に以下の記述をします。
fakeloader の要素は、上記「Javascript」の説明で指定したものと同じ要素名にします。
<div class="fakeloader"></div>

プラグイン提供サイトをもとに、以下のページにfakeLoader.jsのローディングデモ(7種類のアニメーション)を用意しました。
fakeLoader.js のローディングデモ(7種類)



  • このエントリーをはてなブックマークに追加
  • follow us in feedly

コメント

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください