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