【jQuery】fakeLoader.jsでローディング画面を実装する

WEB 2017.07.26 2017.08.08

この「fakeLoader.js」というjQueryプラグインを使用すると、簡単にイケてるフルスクリーンのローディング画面を実装することができます。

FakeLoader.js

こちらのページの「Check out the Demo」というリンクから、公式のデモを確認できます。
ローディング時のアニメーションが7種類と、オリジナルの画像でローディングが可能です。

1 fakeLoaderをダウンロード
2 fakeLoaderの実装方法
3 終わり

fakeLoaderをダウンロード

下記のリンクの「Clone or Download」の「Download ZIP」から、プラグイン一式をダウンロードします。

GitHub – joaopereirawd/fakeLoader.js: fakeLoader.js is a lightweight jQuery plugin that helps you create an animated spinner with a fullscreen loading mask to simulate the page preloading effect.

ダウンロードしたファイルを解凍し、下記のファイルを読み込みます。

fakeLoader.css
fakeLoader.min.js


<link rel="stylesheet" href="fakeLoader.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
<script src=“js/fakeLoader.min.js">

CSSファイルは、<head>タグ内で、
jsファイルは、<body>の閉じタグ直前で、jQuery本体の下に記述してください。

fakeLoaderの実装方法


<div id=“fakeLoader”></div>

<body>タグの下に上記のHTMLを記述します。


$("#fakeLoader").fakeLoader({
    timeToHide: 2000,
    zIndex: "999",
    spinner: "spinner2",
    bgColor: "#30B298",
    //imagePath: ""
});

　オプションはこんな感じで書きます。

timeToHide	ローディングアニメーションが非表示になるまでの時間を指定します。
zIndex	z-indexの値を指定します。
spinner	デフォルトで用意されている7種類のアニメーションの中から選択します。
bgColor	背景色を指定します。
imagePath	オリジナルの画像を使用する場合は、ここで画像のパスを指定します。