JavaScript初心者でも大丈夫!簡単ローディング画面ライブラリ

javascript

JavaScript初心者でも大丈夫!簡単ローディング画面ライブラリ

2018年10月30日 12:00 

JavaScript初心者でも大丈夫!簡単ローディング画面ライブラリ

初めてブログを書きます、社員のhgmと申します。

つたない部分もあると思いますが、よろしくお願いします・・!🙄

 

今回のブログでは、ローディング画面について

簡単にホームページに入れられる方法をまとめましたのでご紹介します。

(私自身ローディング画面を入れたことはなかったので覚え書きとしても。)

 



 

PACE.js

10種類のカラーと14種類のテンプレートがあるので、サイトの雰囲気に合わせて入れ込みが可能です。

とりあえず入れてみようかなー😴という方におすすめ。

 

デモ

https://blog.universe-web.jp/hgm/pace/index.php

 

公式サイト

http://github.hubspot.com/pace/

↑クリックで公式デモに飛びます。

 

実装

まずはGitHubよりライブラリをダウンロードしましょう。

https://github.com/HubSpot/pace

 

※パスは実際の環境に、CSSはお好みのカラーのテンプレートに変更してください。

 

これだけで実装完了!

 

ただし、今の状態だとローディング中にコンテンツが出る可能性があるため、下記のCSSを入れることをお勧めします。

 

 

FakeLoader.js

ローディングアニメーションが7種類あり、こちらも簡単に実装できます。

先ほどのPACEと違い、どのパターンも中央にアニメーションが表示されます。

 

デモ

https://blog.universe-web.jp/hgm/fakeloader/index.php

 

公式サイト

http://joaopereirawd.github.io/fakeLoader.js/

 

↑クリックで公式デモに飛びます。

 

 

実装

まずはGitHubよりライブラリをダウンロードしましょう。

https://github.com/joaopereirawd/fakeLoader.js

 

bodyタグ内の一番上に、下記のHTMLを追加します。

 

※パスは実際の環境に変更してください。

 

timeToHideでアニメーションの表示時間、spinnerでアニメーションの種類を変更できます。

さらにお持ちのGIFがあれば、imagePathにパスを入れることでアニメーションの部分をGIFアニメーションに変更可能!

 

まとめ

2つのローディングJQueryをご紹介しました。

どちらも、複雑でなくとも十分なローディングを簡単に入れることができますね!

 

自分の課題として、ステップアップでSVGを使用したオリジナルのローディング画面に挑戦しようと思うので

後日ブログでまとめたいと思います。

 

 

 

スポンサーリンク

この記事を書いた人

hgm

農業高校出身フロントエンドエンジニアの社員hgmです。 猫センサー搭載済みの愛猫家。 広い視野を持って日々邁進していきます!