ローディング中にプログレスバーを表示するプラグイン PACE

ローディング中にプログレスバーを表示するプラグイン PACE

PACEはファイルを読み込むだけで簡単にプログレスバーが実装できる定番のプラグインです。また、デザインのテーマが豊富に用意されているので様々なローディング画面を演出できます。サイトデザインの重要な要素の一つとして、さらにはユーザーストレスの軽減を兼ねて積極的に導入してみてはいかがでしょうか。

PACE.jsの使い方

PACEのデモページまたはGitHubのPACEのページからファイルをダウンロードして必要なファイルをサーバーへアップロードします。

HTML head
<link rel="stylesheet" href="css/pace-theme-minimal.css"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/pace.min.js"></script>

jQueryのコアファイル、pace.min.js、デザインテーマの CSSファイルを HTMLの head要素に読み込ませます。PACEは JavaScriptのファイルを読み込むだけで body要素の直下に必要な要素を生成してくれます。

HTML body
<body class="pace-running">
<div class="pace pace-active">
<div class="pace-progress" data-progress-text="1%" data-progress="0" style="width: 100%;">
<div class="pace-progress-inner"></div>
</div>
<div class="pace-activity"></div>
</div>
・
・
・

PACEが生成する要素の構成は上記の通りです。body要素にもクラスが追加されます。

PACEが生成する要素に与えられるクラス名と役割
クラス名 説明
.pace PACEが生成するルート要素です。
.pace-progress プログレスバーの要素に対して与えられるクラス名です。
.pace-progress-inner テーマによって使用される要素に与えられるクラス名です。
.pace-activity テーマによって使用される要素に与えられるクラス名です。
.pace-running ローディング中に body要素に与えられるクラス名です。
.pace-done ローディングが完了した時に body要素に与えられるクラス名です。
.pace-active ローディング中に .pace要素に与えられるクラス名です。
.pace-inactive ローディングが完了した時に .pace要素に与えられるクラス名です。
PACEが生成する要素に与えられると役割
属性名 説明
data-progress-text ローディング中の進捗状況をパーセントで表します。
data-progress ローディング中の進捗状況を0から99までの数値で表します。
PACEのメソッド
メソッド名 説明 使い方
start 進行状況バーを表示し更新を開始します。 Pace.start();
restart プログレスバーが隠れている場合はそれを表示して再開します。 Pace.restart();
stop プログレスバーを非表示にして停止します。 Pace.stop();
track 1つ以上のリクエストをトラッキングします。 Pace.track();
ignore 1つまたは複数のリクエストを無視します。 Pace.ignore();
PACEのイベント
イベント名 説明 使い方
start PACEを実行した時がトリガーになります。 Pace.on('start', function(){});
stop PACEを手動で停止した場合がトリガーになります。 Pace.on('stop', function(){});
restart PACEを(手動または新しい AJAXリクエストによって)再開した時がトリガーになります。 Pace.on('restart', function(){});
done PACEを完了した時がトリガーになります。 Pace.on('done', function(){});
hide PACEが隠されている時がトリガーになります。 Pace.on('hide', function(){});

PACEの使い方の詳細は以下のリンクから参照できます。

デモ PACEを使用してローディング画面を演出する

デモでは、諸々の事情で PACEのバージョンは0.4.17を使用しています。また、テーマは使用せずデザインしています。13.1MB分の複数の画像を読み込み、その進捗状況を PACEのプログレスバーで表しています。

HTML head
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/pace.min.js"></script>
<script src="js/masonry.pkgd.min.js"></script>
<script src="js/js/masonry.pkgd.min.js"></script>
HTML body
<body id="pageBody">
<img src="images/1.svg" style="display: none;">
<div id="viewport">
<div class="masonry">
<div><img src="images/9FmukVDAtdibfUVEgKJhfdkv.jpg"></div>
<div><img src="images/y7ZvLZPtXNc6wx5db2spsJz2.jpg"></div>
<div><img src="images/81rqpQsh527BrRrYm0rKqfdb.jpg"></div>
<div><img src="images/Y5XERhiERlGbLD0OBXUTxw7B.jpg"></div>
<div><img src="images/ATa2AmG4KVsaHxnNHblgIO9c.jpg"></div>
<div><img src="images/Ax64PaZxkaiDZMtFlYU8GppB.jpg"></div>
<div><img src="images/5z8VwRoGi2yUeXskgqi9ZLwy.jpg"></div>
<div><img src="images/cu4KdTynpxLxzhX6qAYNPmLk.jpg"></div>
<div><img src="images/d7Wbd6GMWEJW4qKy7vJnxfTl.jpg"></div>
<div><img src="images/fKZcd9Fnuyv8aIkgdE2wqA7y.jpg"></div>
<div><img src="images/6m6pL1NJWLyOS62KIjL4Mmsy.jpg"></div>
<div><img src="images/GewysYjkbrtFXPEg2N8G8ysU.jpg"></div>
<div><img src="images/h0oDmdSeN0619CO9h9EpIggb.jpg"></div>
<div><img src="images/hp2bRV1pcpAt0EtQQ8HsCDCb.jpg"></div>
<div><img src="images/Iphq1rNeQvWj8niv26WTTC30.jpg"></div>
<div><img src="images/IRyxeDzyJiXpSqmb3Ope5LOp.jpg"></div>
<div><img src="images/k6zW5P5pbUjZNxn8nteiK4Js.jpg"></div>
<div><img src="images/B7HHBScig16A0YCfCZUnZuhd.jpg"></div>
<div><img src="images/l1q96jKCjTG7a0aFh3xuDT32.jpg"></div>
<div><img src="images/lw4FSJQ1liH1Za843gfKYxIk.jpg"></div>
<div><img src="images/n0W6XR5jq0OxBYl8Wj4XeIOB.jpg"></div>
<div><img src="images/n2ajeuSwvNHcG8SaP0AzFwj4.jpg"></div>
<div><img src="images/oGJX8YefumEZCPrZmCP4U245.jpg"></div>
<div><img src="images/u3flsCByxB00kgE44ad4InBL.jpg"></div>
<div><img src="images/M3cyhEzCJypzGznndcBCsqnO.jpg"></div>
<div><img src="images/wdFRJ9pINEa3yxZK224T8OTa.jpg"></div>
<div><img src="images/zzSFeyfsicAm82WsgPpJEnpc.jpg"></div>
</div>
</div>
</body>
CSS
body {
  background: #00FFCC;
  overflow-y: scroll;
  overflow-x: hidden;
}

body.pace-done {
  background: #222;
}

.pace {
  background: #00FFCC;
  bottom: 0;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  -webkit-transition: transform .5s cubic-bezier(0.95, 0.05, 0.795, 0.035);
  transition: transform .5s cubic-bezier(0.95, 0.05, 0.795, 0.035);
  z-index: 1;
}

.pace .pace-logo {
  opacity: 1;
  -webkit-transition: opacity 1s .3s, transform .5s cubic-bezier(0.95, 0.05, 0.795, 0.035);
  transition: opacity 1s .3s, transform .5s cubic-bezier(0.95, 0.05, 0.795, 0.035);
  width: 100%;
}

.pace .pace-logo img {
  display: block;
  margin: 0 auto;
  width: 160px;
}

.pace .pace-logo.pace-hide {
  opacity: 0;
}

.pace .pace-progress {
  background: #FFF;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 0;
  z-index: 1;
}

.pace.pace-transition-1 .pace-progress {
  -webkit-transition: width 1s cubic-bezier(0.95, 0.05, 0.795, 0.035);
  transition: width 1s cubic-bezier(0.95, 0.05, 0.795, 0.035);
}

.pace.pace-transition-2 .pace-progress {
  -webkit-transition: width .3s cubic-bezier(0.95, 0.05, 0.795, 0.035);
  transition: width .3s cubic-bezier(0.95, 0.05, 0.795, 0.035);
}

.pace-activity {
  align-items: center;
  display: flex;
  height: 100%;
  left: 0;
  justify-content: center;
  overflow: hidden;
  position: absolute;
  top: 0;
  -webkit-transition: transform .5s cubic-bezier(0.95, 0.05, 0.795, 0.035);
  transition: transform .5s cubic-bezier(0.95, 0.05, 0.795, 0.035);
  width: 100%;
  z-index: 2;
}


#viewport {
  margin: 5% auto;
  opacity: 0;
  width: 95%;
}

.pace-done #viewport {
  opacity: 1;
}

.masonry {
  margin: -10px 0 0 -10px;
  width: calc(100% + 10px);
}

.masonry > div {
  margin: 10px 0 0 10px;
  width: calc(33.33% - 10px);
}

.masonry img {
  height: auto;
  width: 100%;
}

@media (max-width: 568px) {

  .masonry > div {
    width: calc(50% - 10px);
  }
}

@media (max-width: 360px) {

  .masonry {
    margin: 0;
    width: 100%;
  }

  .masonry > div {
    margin: 10px 0 0;
    width: 100%;
  }
}
JavaScript
$(function(){

  var pace = (function(){
    
    'use strict';

    var d = {};
    var s = {};
    var c = {};

    s.target = '.pace';
    s.targetProgress = s.target + '-progress';
    s.targetActivity = s.target + '-activity';
    s.targetLogo = s.target + '-logo';
    s.targetTransition1 = s.target + '-transition-1';
    s.targetTransition2 = s.target + '-transition-2';
    s.hide = s.target + '-hide';

    $.each(s, function(k, v){

      if(v.match(/^\./)) c[k] = v.substr(1);
    });

    init();

    function init(){

      d.active = false;
      d.browser = getBrowserInfo();
      d.transition = d.browser.name == 'safari' || d.browser.isTouch ? c.targetTransition2 : c.targetTransition1;

      Pace.on('start', function(){

        if(!d.active) d.active = setObject();
      });

      Pace.on('done', function(){

        setTimeout(function(){

          d.$pace.css({'transform': 'translate3d(100%, 0, 0)'});
          d.$logo.css({'transform': 'translate3d(-100%, 0, 0)'});

          d.$paceActivity.on('transitionend', function(e){

            if($(this).hasClass(c.targetActivity) && e.originalEvent.propertyName == 'transform') d.$pace.hide();

            d.$paceActivity.off('transitionend');
          });

        }, 1200);
      });

      //android Firefoxは、キャッシュがある場合、Paceの startが実行されない
      d.tid = setInterval(function(){

        if($(s.target).length){

          clearInterval(d.tid);

          if(!d.active) d.active = setObject();
        }

      }, 100);
    }//pace.init()
    
    function setObject(){

      var img = new Image();
      
      img.onload = function(){

        d.$logo.removeClass(c.hide);
      };

      img.src = 'images/1.svg';
      d.$pace = $('.pace').addClass(d.transition);
      d.$paceProgress = $(s.targetProgress);
      d.$paceActivity = $(s.targetActivity);
      d.$logo = d.$paceActivity.append('<div class="' + [c.targetLogo, c.hide].join(' ') + '"><img src="images/1.svg"></div>').children(s.targetLogo);

      return true;
    };//pace.setObject()

    function getBrowserInfo(){
      
      //name: chrome, safari, firefox, opera, opera_mini, android_default_browser, facebook, smooz, vivaldi, edge, ie_11, ie_10, ie_9, ie_8, ie_7, ie_6 | device: mac, ipad, iphone, ipod, android, windows, windows_phone
      var i,e=window.navigator.userAgent.toLowerCase(),n=window.navigator.appVersion.toLowerCase(),d=-1!=e.indexOf("webkit"),f="ontouchstart"in window,o="unknown";return-1!=e.indexOf("msie")||-1!=e.indexOf("trident")?-1!=n.indexOf("msie 6")?o="ie_6":-1!=n.indexOf("msie 7")?o="ie_7":-1!=n.indexOf("msie 8")?o="ie_8":-1!=n.indexOf("msie 9")?o="ie_9":-1!=n.indexOf("msie 10")?o="ie_10":-1!=e.indexOf("trident/7")&&(o="ie_11"):-1!=e.indexOf("webkit")&&-1!=e.indexOf("edge")?o="edge":-1!=e.indexOf("android")&&-1!=e.indexOf("webkit")&&-1!=e.indexOf("version")?o="android_default_browser":-1!=e.indexOf("opr")||-1!=e.indexOf("opera")||-1!=e.indexOf("opios")?o=-1!=e.indexOf("opera mini")?"opera_mini":"opera":-1!=e.indexOf("vivaldi")?o="vivaldi":-1!=e.indexOf("chrome")||-1!=e.indexOf("crios")?o="chrome":-1!=e.indexOf("firefox")||-1!=e.indexOf("fxios")?o="firefox":-1!=e.indexOf("smooz")?o="smooz":-1!=e.indexOf("fban")?o="facebook":-1!=e.indexOf("safari")&&(o="safari"),-1!=e.indexOf("windows")&&-1!=e.indexOf("phone")?i="windows_phone":-1!=e.indexOf("windows")?i="windows":-1!=e.indexOf("iphone")?i="iphone":-1!=e.indexOf("ipad")?i="ipad":-1!=e.indexOf("ipod")?i="ipod":-1!=e.indexOf("mac")?i="mac":-1!=e.indexOf("android")&&(i="android"),{name:o,device:i,isMobile:-1!=e.indexOf("windows")&&-1!=e.indexOf("phone")||-1!=e.indexOf("iphone")||-1!=e.indexOf("ipod")||-1!=e.indexOf("android")&&-1!=e.indexOf("mobile")||-1!=e.indexOf("firefox")&&-1!=e.indexOf("mobile")||-1!=e.indexOf("blackberry"),isTablet:-1!=e.indexOf("windows")&&-1!=e.indexOf("touch")||-1!=e.indexOf("ipad")||-1!=e.indexOf("android")&&-1==e.indexOf("mobile")||-1!=e.indexOf("firefox")&&-1!=e.indexOf("tablet")||-1!=e.indexOf("kindle")||-1!=e.indexOf("silk")||-1!=e.indexOf("playbook"),isTouch:f,isWebkit:d,ua:e}
    };//pace.getBrowserInfo()
  }());//pace()

  $('.masonry').imagesLoaded(function(){
    
    $('.masonry').masonry();
  });
});
ページの先頭へ