【簡単!】LoftLoaderのプラグインを使ってローディングアニメーションを実装してみよう!

プラグインを使ってかんたんにローディングアニメーションを実装してみよう!
ページを読み込むまでにローディングアニメーションを実装してみたい!
ページの読み込みが完了するまでの間、
読者に飽きさせないためにもローディングアニメーションを実装してみました。
今回は、WordPressのプラグイン「LoftLoader」を使ったら簡単に実装できたので
そのご紹介をしていきます!
ゆうくん
当ブログではこのようなローディングアニメーションにしてるよ!
スポンサーサイト

LoftLoader

無料かつ、プラグインをインストールするだけで簡単にローディングアニメーションが実装することが出来ます!
有料プランもありますが、無料だけで十分ですのでご安心ください。

LoftLoaderをおすすめする5つのポイント

  • 「サイト全体」か「トップページのみ」かの表示設定が可能
  • 背景色と透明度のカスタマイズ機能
  • 読み込み後のアニメーションが4種類
  • ローディングアニメーションの変更(5種類+オリジナル画像)
  • 最大表示時間の設定

では実際にプラグインをインストールしていってみましょう!

プラグインを追加

まずは、「プラグインを追加」ページを開き、右上の検索窓に「LoftLoader」を入力し検索をかけます。

青色の四角が交差しているアイコンのプラグインが出てきますので「今すぐインストール」をクリック!
そのあとは「有効化」し、設定作業にはいっていきます。

設定

次に設定をしていきたいので
設定」> 「LoftLoader Lite」を開いてください。

設定画面を表示すると、左側に英語の項目が出てきますがややこしくないので
上から順番に説明していきます!

Display on

Sitewideは「サイト全体」、
Homepage onlyは「トップページだけ」という意味です!

当ブログでは、サイト全体にしております。

 

Background

  • Pick Colorは背景色を指定。
  • Opacityは透明度。
  • Ending Animationは読み込み後のアニメーション

となってます。
当ブログでは、背景色を白色、透明度を90%、アニメーションをFadeに設定!

ちなみにアニメーションは4種類あり、

Fade
ふわっとフェードインする動き
Slide Left & Right
自動ドアのようにウィーンと開く動き
Slide Up
下から上にシャッターを開けるような動き
Slide Up & Down
自動ドアの上下verな動き
ゆうくん
個人的はFadeが気に入ってます!

Loader

ローディングアニメーションを設定することができます。
(5種類+オリジナル画像)

左から順番に説明していきます!

アイコンがグルグルっと回った動き

点が左から順番に点滅する動き
受信中みたいな動き
四角がクルクルと回る動き
オリジナル画像の周りを枠で囲っていく動き
オリジナル画像を下から徐々に色をつけていく動き
蛍の光のようにホワンホワンとした動き
ゆうくん
シンプルなアニメーションなのでどのサイトにも合いそうだね!

More

Moreでは、

  • Maximum Load Time (何秒間ローディング画面を表示するか)
  • Close Button (何秒後に閉じるボタンを表示するか)

があります。
Plugin Dateは特に気にしなくて大丈夫です!

ここではClose Buttonは触らずに、Maximum Load TimeだけでOK!

閉じるボタンを出すと、読者に余計なアクションを増やしてしまうので
最大に何秒間だけローディングアニメーションを表示する設定だけでいいです。

僕は最大10秒間だけに設定しております!
ちなみにローディングアニメーションは読み込みが終わったら自動的に表示が終わる仕様です。

その他の項目

Advanced」 と 「Upgrade to Pro」は特に触る必要はないのでノータッチで大丈夫です!

まとめ

今回はWordPressのプラグイン「LoftLoader」を使ったら簡単にローディングアニメーションを実装できる方法を書きました!

  • ページの読み込みが終わると自動的にローディングアニメーションも非表示になる
  • 最大何秒間表示するのかを設定できる

ので、ずっとローディングアニメーションが流しっぱなしになる心配もないです。

ゆうくん
無料かつ、簡単にローディングアニメーションができるなんて、スゴイ・・・!!

ローディングアニメーションを実装してみたい人には、
おすすめのプラグインになっておりますのでぜひ、試してみてください!

最後までお読みいただきありがとうございましたっ!!

このブログを読んで「いいね」「面白かった」と思っていただけたら
下記バナーをポチッと宜しくお願いします!!今後の励みになりますっ^^