2020/06/05 (更新日: 2020/07/02)

ProgressBar.jsでプログレスバーを実装する方法

Programming Web

Web制作者
「Webサイト読み込み時にプログレスバーを表示させて、UIを向上させたい。簡単な実装方法は無いかな？」

こういった疑問にお答えします。

本記事の内容

プラグインProgressBar.jsでページロード時のプログレスバーを実装する方法

こんにちは、mine（@mineblog7）です。

ブログ歴は4年ほどになります。
現在はmineblogを一人で運営しています。

Webページローディング中に、ページ読み込み中のゲージが表示されていることがあります。いわゆる、プログレスバーと呼ばれるものです。

プログレスバーとは？

ウェブサイトの読み込み状況の進捗をアニメーションで可視化したものなどを指します。全体の処理の割合（%）や、ダウンロードサイズ（MBメガバイト）など様々です。他にも進捗バーとも呼ばれることもあります。

プログレスバーイメージ

こんな感じのイメージですね。

この記事では、プログレスバーを簡単に実装するためのJavaScriptライブラリ「ProgressBar.js」の使い方を紹介します。

ProgressBar.jsによるプログレスバー実装手順

ここから、ProgressBar.jsの実装手順についてご紹介します。
基本的にコピペでいけるのですごく楽です。

ProgressBar.js導入手順

JavaScriptファイルのダウンロード・読み込み
HTML・CSS・JavaScriptをコピペ

それぞれ詳しく説明します。

JavaScriptファイルのダウンロード・読み込み

下記リンクにアクセスし、右クリックでダウンロードを選択し、そのままprogressbar.jsという名前でローカルに保存します。
ProgressBar.jsをダウンロードする

保存したprogressbar.jsをサイトをサーバの任意のディレクトリににアップロードします。アップロードしたprogressbar.jsを<head>内で読み込ませます。

<script type='text/javascript' src='（任意のパス）/progressbar.js'></script>

もしくは、下記コードでGitHub上のJavaScriptファイルを直接読み込ませます。

<script type='text/javascript' src='https://raw.githubusercontent.com/kimmobrunfeldt/progressbar.js/master/dist/progressbar.js'></script>

これで準備はOKです。

HTML・CSSをコピペ

下記URLにアクセスします。
ProgressBar.js

いくつかサンプルがありますが、まず「LINE」テーマの中から選択して、実装してみます。

左下の編集アイコンをクリックします。

実行画面
HTML、CSS、JavaScript、実行結果が表示されており、その場でコードを変更して動作確認ができます。

とりあえず、それぞれコピペしてみます。

HTML

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

HTMLこの1行のみでOKです。

CSS

#container {
  margin: 20px;
  width: 400px;
  height: 8px;
  position: relative;
}

バーの幅と高さなどを指定します。

JavaScript

var bar = new ProgressBar.Line(container, {
  strokeWidth: 4,
  easing: 'easeInOut',
  duration: 1400,
  color: '#FFEA82',
  trailColor: '#eee',
  trailWidth: 1,
  svgStyle: {width: '100%', height: '100%'},
  text: {
	style: {
	  // Text color.
	  // Default: same as stroke color (options.color)
	  color: '#999',
	  position: 'absolute',
	  right: '0',
	  top: '30px',
	  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);  // Number from 0.0 to 1.0

実装イメージ