ローディングアニメーションを簡単に実装することができるjQueryプラグイン「fakeLoader.js」

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をご検討ください。

ローディングアニメーションを簡単に実装することができるjQueryプラグイン「fakeLoader.js」