fakeLoader.jsは、サイトにローディングアニメーションを実装することができるjQueryプラグインです。非常に簡単にローディングアニメーションを設置することができます。
挙動については、以下デモページにてご確認ください。Spinner1～7のボタンをクリックすると、それぞれのローディングアニメーションを確認することができます。
デモページを見る
fakeLoader.jsの使い方
ステップ1. fakeLoader.jsのダウンロードと設置
まずはGitHubからfakeLoader.jsをダウンロードします。
以下のファイルをサーバーにアップロードしましょう。
- fakeLoader.min.js
- fakeLoader.css
ファイルをサーバーに設置したら、以下を<head>～</head>に記述して、それぞれのファイルを読み込みます。
<link rel="stylesheet" href="fakeLoader.css"> <script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="fakeLoader.min.js"></script>
jQuery本体の読み込みもお忘れなく。
ステップ2. ローディングアニメーション表示用のHTML設置
続いて、ローディングアニメーションを表示するためのHTMLを追加します。
<div id="fakeLoader"></div>
こちらは、<body>の直後に記述しましょう。
ステップ3. fakeLoader.jsの実行
最後に、fakeLoader.jsを実行します。以下スクリプトを</body>の直前などに記述しましょう。
<script>
$("#fakeLoader").fakeLoader({
timeToHide: 1200, //ローディング画面が消えるまでの時間
zIndex: 999, //z-indexの値
spinner: "spinner1", //ローディングアニメーションの種類。spinner1～7が指定可能
bgColor: "#2ecc71", //背景色
imagePath:"yourPath/customizedImage.gif" //オリジナルのローディングアニメーション画像へのパス。アニメーションじゃなくてもOK
});
</script>
imagePathなど、必要ないオプションは削除してください。
あとがき
とても簡単にローディングアニメーションを実装できますね。ローディングアニメーションも7種類用意されていて、サイトに合ったものを選ぶことができます。
サイトにローディングアニメーションを導入しようとお考えの方は、ぜひfakeLoader.jsをご検討ください。