2015/01/06

ローディングアイコンを簡単に埋め込めるjQueryプラグイン『fakeLoader.js』

ローディングアイコンを簡単に埋め込めるjQueryプラグイン『fakeLoader.js』

オシャレなローディングアイコンを簡単にページ上に埋め込めるプラグイン『fakeLoader.js』の使い方を紹介します.

目次

入手方法

https://github.com/joaopereirawd/fakeLoader.jsにアクセスし,右側のDownload ZIPをクリックしてファイルをダウンロードします.

ダウンロードしたファイルを解凍し,フォルダ内にあるCSSファイルと,JavaScriptファイルをjQuery本体とともに読み込みます.

<link rel="stylesheet" href="yourPath/fakeLoader.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
<script src="yourPath/fakeLoader.min.js">

設置方法

使用するための準備ができたところで,表示する方法を紹介します.

まず,HTMLでローディングアイコンを表示する領域を作成します.

<div id="fakeLoader"></div>

さらに,JavaScriptを使用して動作させます.

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

さらに,オプションを指定して動作させる場合は以下のようにオプションを指定します.

$("#fakeloader").fakeLoader({
timeToHide:1200, //アイコンが表示される時間(ミリ秒)
zIndex:"999",//zIndexの値
spinner:"spinner1",//ローディングアイコンの種類'spinner1', 'spinner2', 'spinner3', 'spinner4', 'spinner5', 'spinner6', 'spinner7'
bgColor:"#2ecc71", //RGBもしくはRGBAの16進数の値
imagePath:"yourPath/customizedImage.gif" //オリジナル画像を使用する場合の画像へのパス
});

サンプル

動作サンプルはhttp://joaopereirawd.github.io/fakeLoader.js/demo/demo1.htmlにあります.

デフォルトのローディングアイコン以外のサンプルもあります.

まとめ

ローディングアイコンは様々な種類があり,ジェネレータなども存在しますが,パターンや色の変更,オリジナル画像の利用ができるのは便利かと思います.

ロードに時間がかかるようなサイトを制作する場合にぜひ使ってみてください.