vdeep

*

vdeepはプログラミング、IT、Web技術、ライフハックの事などなどを管理人okutaniがつぶやくブログです。月間13万PV〜。

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

      2017/01/31

LINEで送る
Pocket

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

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

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

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

DEMODEMO1

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

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

スポンサーリンク

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

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

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

LINKjoaopereirawd/fakeLoader.js

fakeloader2

ダウンロードが済んだら、各自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

fakeloader3

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

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

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

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

この記事が気に入ったら
いいね ! しよう

Twitter で
LINEで送る
Pocket

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

 - jQuery

スポンサーリンク

PC用AdSense

PC用AdSense

Share
  • このエントリーをはてなブックマークに追加

  こちらの関連記事もどうぞ

jQueryとjQuery UIをCDNでサイトに導入する手順

こんにちは、okutani(@okutani_t)です。JavaScriptを使 …

Lazy Line PainterでSVGアニメーションを実装してみよう

こんにちは、okutani(@okutani_t)です。「Lazy Line P …

レスポンシブ対応のカルーセル「OWL Carousel」を使ってみる

こんにちは、okutani(@okutani_t)です。レスポンシブ対応のカルー …

vdeepのトップページへ戻る画像です。風船の形をした島を女の子が掴んでいます。