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

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

fakeLoader

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

FakeLoader.js

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

fakeLoaderをダウンロード

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

終わり

 一応、僕もデモを作ってみました。

fakeLoader.js | MISOBLOG

非常に簡単に実装できるのでオススメのjQueryプラグインです。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

This site uses Akismet to reduce spam. Learn how your comment data is processed.