「fakeLoader.js」でローディング画面を実装してみよう!
2017/01/31
こんにちは、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
- spinner
- bgColor
- imagePath
ローディング画面が消えるまでの時間。
z-indexの値を決めることができる。
ローディングアニメーションの種類を選択できる。spinner1-7まで選択可。
背景色を指定。
git画像までのパスを指定。指定することでデフォルトのアニメーションではなく、Gif画像をローディング画面で使うことができる。指定しなければデフォルトのアニメーションが使われる。
上記のオプションを設定することで、かんたんにローディング画面を実装することができます。
spinnerの種類をいろいろ変えてみて、お好きなアニメーションを使ってみてください。
また、ローディングのGif画像は下記のサイトでかんたんに作ることができます。僕はいつもここで作ってます。
Gif画像を使うことができるので、このようなジェネレーターでたくさんの種類のローディングアイコンを使えるのがいいですね。
また、CSSでローディングのアニメーションを自分で実装して、拡張して使うのもいいかと思います。僕はCSSコーディングできないのでアドバイスできませんが…!
これで、画面読み込み時にローディング画面が表示されるかと思います。かなりかんたんにローディング画面が実装できて便利ですね。
ローディング画面を実装するさいの参考になれば幸いです。
Web開発のお仕事を募集しています
フリーランスのエンジニアとして、Webシステム開発のお仕事依頼を随時募集しています(現在の業務量によってお受けできない場合もあります)。
「Ruby on Rails」「JavaScript(jQuery, Reactなど)」「HTML + CSS」を用いたシステム開発、「Heroku」等を用いたサーバー構築・運用、「Git」や「GitHub」を利用したソーシャルコーディングなどに対応しています。
ご依頼を検討している方は、下記リンク本ブログからのお問い合わせ、もしくはokutaniのポートフォリオからご連絡ください。
LINKお問い合わせ
スポンサーリンク