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

 

<!-- 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です。 猫センサー搭載済みの愛猫家。 広い視野を持って日々邁進していきます!