「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
 });

timeToHide

ローディング画面が消えるまでの時間。

zIndex

z-indexの値を決めることができる。

spinner

ローディングアニメーションの種類を選択できる。spinner1-7まで選択可。

bgColor

背景色を指定。

imagePath

git画像までのパスを指定。指定することでデフォルトのアニメーションではなく、Gif画像をローディング画面で使うことができる。指定しなければデフォルトのアニメーションが使われる。

上記のオプションを設定することで、かんたんにローディング画面を実装することができます。

spinnerの種類をいろいろ変えてみて、お好きなアニメーションを使ってみてください。

また、ローディングのGif画像は下記のサイトでかんたんに作ることができます。僕はいつもここで作ってます。

LINKLoad Info – gif generator

Gif画像を使うことができるので、このようなジェネレーターでたくさんの種類のローディングアイコンを使えるのがいいですね。

また、CSSでローディングのアニメーションを自分で実装して、拡張して使うのもいいかと思います。僕はCSSコーディングできないのでアドバイスできませんが…！

これで、画面読み込み時にローディング画面が表示されるかと思います。かなりかんたんにローディング画面が実装できて便利ですね。

ローディング画面を実装するさいの参考になれば幸いです。

Pocket

okutani (okutani_t) のヒトコト

okutani_t

オシャレに見せたいサイトにローディング画面、安直な考えですがよく使います。自分で実装してもいいかと思いますが、ラクしたいときはjQueryプラグインをサクッと使うのもありですね。

Web開発のお仕事を募集しています

フリーランスのエンジニアとして、Webシステム開発のお仕事依頼を随時募集しています（現在の業務量によってお受けできない場合もあります）。

「Ruby on Rails」「JavaScript（jQuery, Reactなど）」「HTML + CSS」を用いたシステム開発、「Heroku」等を用いたサーバー構築・運用、「Git」や「GitHub」を利用したソーシャルコーディングなどに対応しています。

ご依頼を検討している方は、下記リンク本ブログからのお問い合わせ、もしくはokutaniのポートフォリオからご連絡ください。

LINKお問い合わせ

LINKokutani's Portfolio

- jQuery