「fakeLoader.js」でローディング画面を実装してみよう！

2016/01/13 2017/01/31

Pocket

こんにちは、okutani(@okutani_t)です。コンテンツの読み込みが多いサイトにローディング画面を実装してあげると、ユーザビリティの向上につながって良いですね。

また、サイトをちょっとオシャレに見せたい場合なんかも、ローディング画面を実装してみるのもひとつの手です。

そんなローディング画面をかんたんに実装できる『fakeLoader.js』を今回ご紹介します。

下記が公式のDEMOページです。

DEMODEMO1

DEMOページから、画面遷移時にローディング画面が表示されていることが確認できます。

では、さっそくfakeLoader.jsを使って、オシャレなローディング画面を実装してみましょう。

fakeLoader.jsを使ってローディング画面を実装してみよう

まずはfakeLoader.jsをダウンロードしましょう。

下記のGitHubに移動して「Download ZIP」をクリック。

LINKjoaopereirawd/fakeLoader.js

ダウンロードが済んだら、各自ZIPファイルを解凍しておきましょう。

中にある次のファイルを利用します。

fakeLoader.css
fakeLoader.min.js (min付きは圧縮済みファイル)

次のように設置します。

<link rel="stylesheet" href="fakeLoader.css">
<script src="fakeLoader.min.js"></script>

設置例↓

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Fake Loader Test</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

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

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

    <p>コンテンツ1</p>

    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="fakeLoader.min.js"></script>
    <script>
     $("#fakeLoader").fakeLoader({
       timeToHide:1200, //Time in milliseconds for fakeLoader disappear
       zIndex:999, // Default zIndex
       spinner:"spinner1",//Options: 'spinner1', 'spinner2', 'spinner3', 'spinner4', 'spinner5', 'spinner6', 'spinner7'
       bgColor:"#2ecc71", //Hex, RGB or RGBA colors
       // imagePath:"yourPath/customizedImage.gif" //If you want can you insert your custom image
     });
    </script>
  </body>
</html>

かんたんに解説します。

解説

<body>タグ直後に次のコードを記述します。

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

このidに対して、次のjQueryコードを適応させています。

 $("#fakeLoader").fakeLoader({
   timeToHide:1200, //Time in milliseconds for fakeLoader disappear
   zIndex:999, // Default zIndex
   spinner:"spinner1",//Options: 'spinner1', 'spinner2', 'spinner3', 'spinner4', 'spinner5', 'spinner6', 'spinner7'
   bgColor:"#2ecc71", //Hex, RGB or RGBA colors
   // imagePath:"yourPath/customizedImage.gif" //If you want can you insert your custom image
 });