JavaScript

progressbar.jsを使ってページ表示前にローディング（プログレスバーと数値％カウントアップ）表示の実装方法

  /

ウェブサイトのユーザビリティを向上させるためには、ページが完全に読み込まれる前に進捗を示すローディングインディケーターを表示することが重要です。
今回は、progressbar.jsを使用して、ページ表示前にプログレスバーと数値％カウントアップを表示する方法をご紹介します。

Contents

ローディング（プログレスバーと数値％カウントアップ）表示する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>

HTML記述

次に、ページ初期表示時のページ全体（class=”wrap”）とローディング（id=”container”）をHTMLに追加します。

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

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

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>

progressbar.jsでローディング（数値％カウントアップ）を表示するデモページ

以下のリンクから、progressbar.jsを使ったローディング（数値％カウントアップ）表示のデモページを確認できます。

progressbar.jsでローディング（数値％カウントアップ）を表示するデモページ

ソース元：ProgressBar.js – Progress bars with JavaScript

詳細なドキュメントや他の機能については、以下のリンクから確認できます。

ProgressBar.js – Progress bars with JavaScript

まとめ

以上が、progressbar.jsを使ってページ表示前にプログレスバーと数値％カウントアップを表示する方法です。progressbar.jsは、簡単にカスタマイズ可能なプログレスバーライブラリで、ユーザビリティを向上させるための有力なツールです。是非、自分のプロジェクトに取り入れてみてください。

　
※流用される場合は自己責任でお願いします。
　デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。

progressbar.js プログレスバー ローディング
関連記事