ヘッダー上部にプログレスバーを表示

とある案件でページ遷移やアクセスした時にページの上部にプログレスバーを表示したいと依頼があったためプログレスバーの作り方。

HTML

<div id="progress-box">
  <div id="progress-bar"></div>
</div>

SCSS

#progress-box {
  width: 100%;
  height: 0;
  position: relative;
  z-index: 5;
  background: transparent;

  #progress-bar {
    width: 0;
    height: 3px;
    background: #000000;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 6;
    transition: .3s;
  }
}

jQuery

// progress bar 
var progress = 0;
var imgCount = $('img').length;
$('img').each(function(){
  var src = $(this).attr('src');
  $('<img>').attr('src',src).on('load',function(){
    progress++;
  });
});

var timer = setInterval(function(){
  $('#progress-bar').css({
    'width': (progress / imgCount) * 100 + '%'
  });

  if((progress / imgCount) * 100 == 100){
    clearInterval(timer);
    $('#progress-bar').delay(500).animate({
      'opacity': 0
    }, 200);
  }
}, 1);