ProgressBar.jsでプログレスバーを実装する方法
この記事の概要

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

「ProgressBar.js」でプログレスバーを実装できます。
このあと詳しく説明しますね。
本記事の内容
- プラグインProgressBar.jsでページロード時のプログレスバーを実装する方法
Webページローディング中に、ページ読み込み中のゲージが表示されていることがあります。いわゆる、プログレスバーと呼ばれるものです。
プログレスバーとは?
プログレスバーイメージ

こんな感じのイメージですね。
この記事では、プログレスバーを簡単に実装するための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
実装イメージ

コピペだけで実装できました。
各サンプルを紹介
ProgressBar.jsの公式で紹介されているテーマを紹介します。
実装したいサイトのイメージに合致したもの、自分の好みの選んでみてください。
LINE

テーマの「LINE」の実装イメージです。
シンプルなライン、ライン+進捗度(%)、ゲージの色変化のパターンなどがあります。
CIRCLE

テーマの「CIRCLE」の実装イメージです。
円型のプログレスバーとなっており、シンプルな円、跳ねるエフェクト、円+進捗度のパターンなどがあります。
SEMICIRCLE

テーマの「SEMICIRCLE」の実装イメージです。
半円のプログレスバーです。シンプルな半円、半円+進捗度+色変化のパターンなどがあります。
CUSTOM

「CUSTOM」の実装イメージです。
公式では、ハートのプログレスバーがサンプルで紹介されています。
まとめ
ProgressBar.jsによるプログレスバー実装手順について再度まとめます。
ポイント
- ProgressBar.jsのJavaScriptファイルを実装したいサイトで読み込む
- 使用したいテーマのHTML、CSS、JavaScriptをコピペする

基本コピペするだけでOKで、便利な軽量JavaScriptライブラリなので、使ってみてください。
プログレスバー実装方法まとめ
Webページでプログレスバーを実装する8つの方法まとめ
mineblogでプログレスバーの実装方法をいくつか紹介してきました。各プログレスバーの実装方法について、その特徴や用意されているオプションを含めてまとめました。
おすすめ記事 【体験談】弁護士の退職代行で有給30日分を取得した話
おすすめ記事 YouTubeライブで気をつけるべきチャットへのコメントマナーまとめ
おすすめ記事 お名前.comのドメインプロテクションは必要か【採算がとれるか】