状況に合わせたプログレスバーで待ち時間を「見える化」する（2/2）

<main class="l-main preload"> // --------A
 
  ...中略...
 
 </main>

var $preload = $('.preload');
 
 var $loading = $('#js-loading');
 
 var $progressBar = $('#js-progress');
 
 var $container = $('#js-container');
 
 $container.addClass('is-loading');
 
 
 
 var imgSrcs = []; 
 
 
 
 $preload.find('img').each(function(){
 
  imgSrcs.push($(this).attr('src'));
 
 }); 
 
 
 
 var loader = new $.ImgLoader({
 
  srcs : imgSrcs, //画像などのパスを配列に格納 --------B
 
  pipesize: 2, //同時にロードできる数の上限
 
  delay: 500, //次のロードまでの遅延をミリ秒で指定
 
  timeout: 500, //タイムアウトまでの時間をミリ秒で指定
 
  useXHR2: false //XMLHttpRequestVersion2を利用するかどうか
 
 });
 
 
 
 loader.on('progress', function(progress) { // --------C
 
  var prog = progress.loadedRatio; //進捗率を取得
 
  TweenMax.to($progressBar, 0.5, {
 
  width: progress.loadedRatio*100 + '%' //進捗率を幅に反映
 
  });
 
 });
 
 
 
 loader.on('itemload', function($img) { // --------D
 
 });
 
 
 
 loader.on('allload', function($img) { // --------E
 
  $container.removeClass('is-loading');
 
  TweenMax.to($loading, 0.5, {
 
  autoAlpha: 0,
 
  onComplete: function() {
 
  TweenMax.set($loading, {display: 'none'});
 
  },
 
  delay: 1
 
  });
 
 });
 
 
 
 loader.load(); //ロードを実行 --------E

<div id="js-loading" class="loader">
 
  <div class="loader-icon"></div> 
 
  <div class="loader-wrapper">
 
  <div id="js-progress" class="loader-progress"></div>
 
  </div>
 
 </div>
 
 

.loader .loader-progress {
 
  width: 0%; // --------A
 
  height: 3px;
 
  background-color: #c9c9c9;
 
 }

loader.on('progress', function(progress) {
 
  var prog = progress.loadedRatio; //進捗率を取得 // --------B
 
  TweenMax.to($progressBar, 0.5, { // --------C
 
  width: progress.loadedRatio*100 + '%' //進捗率を幅に反映 --------C
 
  }); // --------C
 
 });

.loader .loader-icon {
 
  position: absolute;
 
  top: 50%;
 
  left: 50%;
 
  width: 100px;
 
  height: 100px;
 
  transform: translate(-50%, -50%);
 
  background-image: url(../images/snow-sprite.png);
 
  background-position: 0 -3200px;
 
  background-repeat: no-repeat;
 
  animation: loadingAnimation 15s steps(100) 0.4s infinite;
 
 }
 
 @keyframes loadingAnimation {
 
  100% {
 
  background-position: 0 0;
 
  }
 
 }