progressbar.jsでローディング（プログレスバーと数値％カウントアップ）表示｜DAD UNION

progressbar.jsを使ってページ表示前にローディング（プログレスバーと数値％カウントアップ）を表示する方法をご紹介します。

Contents

ローディング（プログレスバーと数値％カウントアップ）表示するCSS記述
progressbar.jsでローディング（プログレスバーと数値％カウントアップ）表示するHTML記述
progressbar.jsでローディング（プログレスバーと数値％カウントアップ）表示するJavaScriptの記述
progressbar.jsでローディング（数値％カウントアップ）を表示するデモページ
ソース元：ProgressBar.js – Progress bars with JavaScript

ローディング（プログレスバーと数値％カウントアップ）表示するCSS記述

※ページ初期表示時のページ全体（.wrap）とローディング（#container）のCSS記述です。必要に応じて変更して下さい。

body {
    font-size: 16px;
}
h1{
  text-align: center;
  font-size: 20px;
  line-height: 1.6em;
  padding: 20px 0;
  position: relative;
}
p{
  text-align: center;
  position: relative;
}
.wrap{
  position: fixed;
  z-index: 999;
  width: 100%;
  height: 100%;
  background: #000000;
  text-align:center;
  color:  #ffffff;
  top: 0;
}
#container {
  margin: 0 auto;
  width: 50%;
  height: 12px;
  position: absolute;
  left: 25%;
  top: 45%;
}
</style>

progressbar.jsでローディング（プログレスバーと数値％カウントアップ）表示するHTML記述

※ページ初期表示時のページ全体（class=”wrap”）とローディング（id=”container”）を用意します。必要に応じて変更して下さい。

<h1>progressbar.jsでローディング（数値％カウントアップ）を表示</h1>
<p>ページを更新（F5）すると再度ローディングが表示されます。</p>

<div class="wrap">
  <div id="container"></div>
</div>

progressbar.jsでローディング（プログレスバーと数値％カウントアップ）表示するJavaScriptの記述

※jquery-3.4.1.min.js、progressbar.min.jsファイルを読み込みます。new ProgressBar.Line(container, {オプション})を記述します。オプションにはローディングのイージング、速度、カラー、幅等を設定します。

<script src="jquery-3.4.1.min.js"></script>
<script src="progressbar.min.js"></script>
<script>
var bar = new ProgressBar.Line(container, {
  strokeWidth: 4,
  easing: 'easeInOut',
  duration: 1400,
  color: '#fff',
  trailColor: '#ccc',
  trailWidth: 1,
  svgStyle: {width: '100%', height: '100%'},
  text: {
    style: {
      // テキストカラー等
      color: '#fff',
      position: 'absolute',
      right: '50%',
      top: '40px',
      padding: 0,
      margin: 0,
      transform: null
    },
    autoStyleContainer: false
  },
  from: {color: '#FFEA82'},
  to: {color: '#ED6A5A'},
  step: (state, bar) => {
    bar.setText(Math.round(bar.value() * 100) + ' %');
  }
});

bar.animate(1.0, function () {
  $(".wrap").delay(500).fadeOut(800); //アニメーション終了後ローディングを非表示
});
</script>