javascript
JavaScript初心者でも大丈夫!簡単ローディング画面ライブラリ
2018年10月30日 12:00
初めてブログを書きます、社員の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
<!-- JS --> <script type="text/javascript" src="pace.min.js"></script> <!-- CSS(ピンクのBarber Shop) --> <link rel="stylesheet" href="themes/pink/pace-theme-barber-shop.css" />
※パスは実際の環境に、CSSはお好みのカラーのテンプレートに変更してください。
これだけで実装完了!
ただし、今の状態だとローディング中にコンテンツが出る可能性があるため、下記のCSSを入れることをお勧めします。
.pace-running .center{ display: none; } .pace-done .center{ display: block; }
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を追加します。
<div id="fakeLoader"></div>
<!-- JS --> <script src="fakeLoader.min.js"> <!-- CSS --> <link rel="stylesheet" href="fakeLoader.css">
<script type="text/javascript"> $("#fakeLoader").fakeLoader({ timeToHide: 1200, //アニメーションが表示されてから消えるまでの時間 zIndex: "999", spinner: "spinner1", //オプション: 'spinner1', 'spinner2', 'spinner3', 'spinner4', 'spinner5', 'spinner6', 'spinner7' bgColor: "#2ecc71" //imagePath: "yourPath/customizedImage.gif" //GIFアニメーションを追加できる }); </script>
※パスは実際の環境に変更してください。
timeToHideでアニメーションの表示時間、spinnerでアニメーションの種類を変更できます。
さらにお持ちのGIFがあれば、imagePathにパスを入れることでアニメーションの部分をGIFアニメーションに変更可能!
まとめ
2つのローディングJQueryをご紹介しました。
どちらも、複雑でなくとも十分なローディングを簡単に入れることができますね!
自分の課題として、ステップアップでSVGを使用したオリジナルのローディング画面に挑戦しようと思うので
後日ブログでまとめたいと思います。
関連記事
この記事を書いた人
hgm
農業高校出身フロントエンドエンジニアの社員hgmです。 猫センサー搭載済みの愛猫家。 広い視野を持って日々邁進していきます!