このページの本文へ

DESIGN こうめの“これから使える”jQueryプラグイン ― 第20回

おしゃれなローディングアニメでイライラ解消 fakeLoader.js

2015年02月06日 11時00分更新

大竹孔明

  • この記事をはてなブックマークに追加
本文印刷
今回紹介するプラグイン

fakeLoader.js


 「fakeLoader.js」は、ページの読み込みなどの際にフルスクリーンのローディングアニメーションを表示するjQueryプラグインです。

 あくまでも「フェイク」なので読み込みが終わったかどうかは判断できませんが、デフォルトで用意されたオシャレなローディングアイコンを手軽に表示でき、オリジナルの画像や背景色も選択できます。設置方法が明快で、圧縮版のサイズは2KBという超軽量な点も特徴です。

 fakeLoader.jsプラグインはGoogle ChromeなどのモダンブラウザーとInternet Explorer 8以降、スマートフォンではiOS 7.1のSafari、Android 4.1以降の「ブラウザ」に対応しています。

 ライセンスはMITです。ライセンスに従って著作権表示は削除せずに利用しましょう。

step1 jQueryプラグインの読み込み

 jQuery本体をjQueryの公式サイトから、 fakeLoader.jsを配布ページからダウンロードします。「Download Compressed」ボタンをクリックして保存します。

Particleground配布ページ
fakeLoader.js配布ページ

 fakeLoader.jsは GitHubでも公開されており、ページ右下の「Download ZIP」ボタンからダウンロードできます。

 また、パッケージマネージャーの「bower」でもインストールできます。bowerを導入している場合は、以下のコマンドですぐに利用できます。


Bower install fakeloader 

 利用するWebページのbodyの閉じタグ直前で、jQuery本体と、ダウンロードした「fakeLoader.min.js」を読み込みます。


//(中略)
<script src="jquery.min.js"></script>
<script src="fakeLoader.min.js"></script>
</body>
//(中略)

 次にCSSファイルをhead タグ内で読み込みましょう。

HTML


//(中略)
<link rel="stylesheet" href="fakeLoader.css">
</head>
//(中略)

 これで準備はOKです。

step2 基本的な使い方

 実際にプラグインの使い方を説明します。

 fakeLoader.jsを読み込んだ後、fakeLoader()メソッドを実行します。fakeLoader()メソッドは、使用したい要素をセレクターで指定し、.(ドット)繋ぎで指定します。下の例では「fakeloader」というID名を指定しています。

JavaScript


//(中略)
<script src="jquery.min.js"></script>
<script src="fakeLoader.min.js"></script>
<script type="text/javascript">
$("#fakeloader").fakeLoader();
</script>
</body>
//(中略)

 ローディングアニメーションの表示領域として、任意のID名かclass名を付与した空のdivタグをbodyタグ直下に記述します。

HTML


//(中略)
<div id="fakeLoader"></div>
//(中略)

 ページを読み込んだときに、下図のようなローディングアニメーションが表示されれば成功です。

Particleground配布ページ

step3 オプションによるカスタマイズ

 fakeLoader.jsにはいくつかオプションが用意されています。オプションは以下のようにfakeLoader({...})内に指定します。

JavaScript


//(中略)  
<script>
  $("#fakeloader").fakeLoader({
  // ここにオプションを指定する
    timeToHide: 1200,
    zIndex: 999
  });
//(中略)  

 複数のオプションを指定する場合は、,(カンマ)区切りで指定します。

オプション名 説明 デフォルト値
timeToHide ローディングアニメーションが消えるまでの時間を指定します。 1200
maxSpeedX particleの、X軸(横)移動の移動時間の最大時間を指定します。 0.7
zIndex ローディングアニメーションの`z-index`の値を指定します。 "999"
spinner デフォルトで用意された7つのアニメーションを選択します。動きは以下の動画で確認できます。

"spinner1"
bgColor 背景色を指定します。Hex,RGB, RGBAで指定できます。 "#2ecc71"
imagePath オリジナルの画像をプリローディング用の画像として利用できます。 画像までのパスを指定します。 null

 ローディングアニメーションは、体感速度の軽減やWebサイトのブランディングにつながります。ただし、長すぎるローディング画面をユーザーは歓迎しないので、実装する前に、まずはパフォーマンスをできる限り最適化しましょう


著者:大竹 孔明

著者写真

1990年生まれ。2012年3月から2014年6月まで株式会社まぼろしでコーディングを中心にWebデザイン、CMS構築などを経験。2014年8月より株式会社ディー・エヌ・エー【DeNA】でフロントエンド業務に携わる。イベントでの登壇や執筆などの活動も行っており、ブログWeb ambではコーディングを中心にしたWeb制作にまつわる様々な情報を発信している。
個人でCSSを擬人化したリファレンスサイトのGCSSや、有料セミナーのWeb Developer Selectionの運営なども行う。 近著に「レスポンシブWebデザインテクニックブック プロが教えるマルチデバイス対応の手法」(共著、MdN刊)がある。

(タイトルイラスト:望月 水奈

Web Professionalトップへ

この連載の記事

一覧へ
Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

HTMLリファレンス誘導バナー

CSSリファレンスサイト誘導バナー

Webディレクター江口明日香が行く

ランキング