Webページでプログレスバーを実装する8つの方法まとめ
この記事の概要

Webページでプログレスバーを実装する方法ってどんなものがあるのかな?プログレスバーにも色々あるし、プラグインとかどれを使えばいいんだろう・・・?

色々な種類のプログレスバーを実装する方法を8つ紹介します。
参考にしてみてください!
本記事の内容
- Webページでプログレスバーを実装する方法まとめ
Webページにプログレスバーを表示させたいことってありませんか?
プログレスバーといっても、タイプは様々です。
プログレスバーのタイプ
- スクロール量に対応したプログレスバー
- ページ読み込み中に表示するプログレスバー
- 通常のプログレスバー
この記事では、各プログレスバーの実装方法について、その特徴や用意されているオプションを含めてまとめました。
スクロール量に対応したプログレスバー
Webページをスクロールした時に、スクロール量に応じてメーターが増減するようなプログレスバーの実装方法を紹介します。
各種プラグイン
- Scrolline.js
- PrognRoll
- scrollpup.js
それぞれの特徴やオプションを紹介します。
Scrolline.js
Scrolline.jsでは9つのオプションが用意されています。
プログレスバーの配色や位置、高さ・幅などを設定することが可能です。この記事で紹介するプラグインの中でも、オプションの数はトップクラスです。
Scrolline.jsの基本情報
- jQuery必須
- オプションあり
Scrolline.jsによるプログレスバー実装方法
Scrolline.jsによるプログレスバーの実装方法を詳しく説明します。
» GitHub – anthonyly/Scrolline.js
Scrolline.jsの実装手順
- jQuery読み込み
- 必要なファイルをダウンロード・読み込み
- 動作用のJavaScriptを記述
まず、head
タグ内でjqueryを読み込みます。
Scrolline.jsのjQuery読み込み
<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js?ver=1.11.3'></script>
下記リンクにアクセスし、必要なファイルをダウンロード・読み込みます。
» jquery.scrolline.js
右クリックでダウンロードを選択し、そのままjquery.scrolline.js
という名前でローカルに保存します。
保存したjquery.scrolline.js
をサイトをサーバの任意のディレクトリににアップロードします。アップロードしたjquery.scrolline.js
をhead
内で読み込ませます。
<script type='text/javascript' src='(任意のパス)/jquery.scrolline.js'></script>
動作用の下記JavaScriptコードをbodyタグ内
に記述します。
$(function() {
$.scrolline();
});
基本的には、これだけで動作します(デフォルト設定)。
Scrolline.jsの実装イメージ

スクロールを上下するとバーが増減します。
Scrolline.jsのオプション
オプション | 単位 | デフォルト | 詳細 |
backColor | 文字列 | ‘#ecf0f1’ | プログレスバーの背景色 |
direction | 文字列 | ‘horizontal’ | プログレスバーを横にするか縦にするかを指定できます。 (vertical:縦/horizontal:横) |
frontColor | 文字列 | ‘#2ecc71’ | プログレスバーの色 |
opacity | 数値 | 1 | 透明度の設定。 0~1の間の数値を指定します。 |
position | 文字列 |
横方向の場合:’top’ 縦方向の場合:’left’ |
プログレスバーの位置指定。 横方向の場合:’top’ or ‘bottom’ 縦方向の場合:’left’ or ‘right’ |
reverse | boolean | false | プログレスバーの進む方向を指定。 (true:右から左へ進む/false:左から右へ進む) |
weight | 数値 | 5 | プログレスバーの高さ(px)指定。 |
zindex | 数値 | 10 | プログレスバーのz-indexを指定。 |
scrollEnd | 関数 | – | ページスクロールが終わったら、関数を呼び出す。 |
Scrolline.jsが持つオプションの設定を変更して、カスタマイズしたプログレスバーを実装してみます(サンプル1~3)。
サンプル1の設定(Scrolline.js)
- プログレスバーの進行方向を逆にする
- プログレスバーの位置
- プログレスバーの背景色
- プログレスバーの色
- バーの高さ(太さ)
サンプル1の実装イメージ

サンプル1のJavaScript
$.scrolline({
reverse : true,
position : 'bottom',
backColor : '#cccccc',
frontColor : '#009688',
weight : 15
});
reverse : true
にすることで、通常左から右にプログレスバーが伸びるものを右から左に伸びるようにしています。
サンプル2の設定(Scrolline.js)
- プログレスバーを縦に変更
- プログレスバーの位置を右に変更
- プログレスバーの背景色
- プログレスバーの色
- プログレスバーの透明度を変更
- バーの高さ(太さ)
サンプル2の実装イメージ

サンプル2のJavaScript
$.scrolline({
direction : 'vertical',
position : 'right',
backColor : '#bbbbbb',
frontColor : '#ffc107',
opacity: 0.6,
weight : 25
});
また、
opacity: 0.6
を設定して、プログレスバーを透過させています。
サンプル3の設定(Scrolline.js)
サンプル3はオプションで紹介したscrollEnd
を設定します。
サンプル3のJavaScript
$.scrolline({
weight : 10,
scrollEnd : function() {
alert('スクロールを終了しました。');
}
});
scrollEnd
はページをスクロールし終わった時に、設定した関数を実行させることができます。サンプル3では、スクロール完了した時に「スクロールを終了しました。」
というアラートメッセージを表示するような設定をしています。
PrognRoll
PrognRollを導入すると、body
タグを基準に非常にシンプルなプログレスバーを実装できます。
バーの高さと色を設定するオプションがついています。また、新たに任意のdiv
要素を追加して、そのdiv
を基準にした、プログレスバーを実装できます。
PrognRollの基本情報
- jQuery必須
- オプションあり
PrognRollの実装手順
- jQuery読み込み
- 動作用のJavaScriptを記述
まず、head
タグ内でjqueryを読み込みます。
jQueryの読み込み
<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js?ver=1.11.3'></script>
head
内にプログレスバー実装用のJavaScriptファイル記述します。
JavaScriptファイルの読み込み方法
- GitHubのJavaScriptファイルを直接読み込む方法
- JavaScriptファイルをダウンロードして、サーバーにアップロードして読み込む方法
それぞれ詳しく説明します。
GitHubのJavaScriptファイルを直接読み込む方法
<script src="https://raw.githack.com/mburakerman/prognroll/master/src/prognroll.min.js"></script>
上記コードをhead
内に記述します。
JavaScriptファイルをダウンロードして、サーバーにアップロードして読み込む方法
GitHubにファイルが公開されています。
GitHub – mburakerman/prognroll
JavaScriptファイルの中身のコードはこちら。
prognroll.min.js
JavaScriptファイルのページへアクセスし、右クリックでprognroll.min.js
という名前で保存し、サイトを運営しているサーバーの任意の場所へアップします
<script src="(任意のパス)/prognroll.min.js"></script>
次に、動作させるためのJavaScriptのコードを記述します。
PrognRollのJavaScript
$(function() {
$("body").prognroll();
});
基本的に、JavaScriptに上記コードを記述するだけで動作します。
PrognRollの実装イメージ

PrognRollにはいくつかオプションが用意されています。
PrognRollで設定できるオプション
オプション | 単位 | 詳細 |
height | px | プログレスバーの高さを指定 |
color | hex、rgb | プログレスバーの色を指定 |
custom | boolean(true/false) | trueにすると、body 以外に別のdiv 要素を追加して、その要素上のスクロール量をプログレスバーに反映させる。 |
height
、color
はCSSで指定する時と同じように設定できます。
バーの高さ・色を変更(PrognRoll)
オプションを指定して、カスタマイズしてみます。バーの高さを15pxにして、色を赤にしてみました。
バーの高さ・色を変更時のJavaScript(PrognRoll)
$(function() {
$("body").prognroll({
height: 15,
color: "#FF0000",
custom: false
});
});
バーの高さ・色を変更時の実装イメージ(PrognRoll)

新しく要素を追加(PrognRoll)
新しく要素を追加して、その要素内でスクロール量をプログレスバーに反映させます。
新しく要素を追加時のHTML(PrognRoll)
<div class="box">
(~省略~)
</div>
div
要素を追加してその中にコンテンツを記述します。
新しく要素を追加時のCSS(PrognRoll)
.box {
position: absolute;
top: 30%;
left: 50%;
transform: translate(-50%, -50%);
max-height: 250px;
height: 1500px;
padding: 5px 10px;
color: #333;
border: 1px solid #d1d1d1;
overflow: auto;
}
分かりやすく絶対位置にしておきます。
新しく要素を追加時のJavaScript(PrognRoll)
$(function() {
$(".box").prognroll({
custom: true
});
});
custom:true
に設定します。
新しく要素を追加時の実装イメージ(PrognRoll)

scrollpup.js
この記事で紹介しているスクロールに対応したプログレスバーを実装するためのプラグインの中では、最もシンプルです。jQueryは不要で、用意されているオプションはプログレスバーの色と高さの2つのみです。余計な設定が不要だという場合におすすめです。
scrollpup.js基本情報
- jQuery不要
- オプションあり
scrollpup.jsの実装手順
- JavaScriptファイルの読み込み
- 動作用のJavaScriptを記述
head
内にプログレスバー実装用のJavaScriptファイル記述します。
scrollpup.jsのJSファイルの読み込み方法
- GitHub上のJavaScriptファイルを直接読み込む方法
- ダウンロードして、サーバーにアップロードして読み込む方法
それぞれ詳しく説明します。
GitHub上のJavaScriptファイルを直接読み込む方法(scrollpup.js)
<script src="https://flouthoc.github.io/scrollpup.js/dist/scrollpup.js"></script>
上記コードを<head>内に記述します。
ダウンロードして、サーバーにアップロードして読み込む方法(scrollpup.js)
GitHubにファイルが公開されています。
GitHub – flouthoc/scrollpup.js
JavaScriptファイルの中身のコードはこちら。
scrollpup.min.js
コードの中身をコピペして、scrollpup.min.js
という名前で保存し、サイトを運営しているサーバーの任意の場所へアップします
<script src="(任意のパス)/scrollpup.min.js"></script>
scrollpup.jsのJavaScript
実際に動作させるためのJavaScriptのコードを記述します。
scrollpup.jsのサンプルページを見てください。
scrollpup.js

真ん中に表示されているJavaScriptコードをそのまま使ってみます。
scrollpup.js公式のデフォルト設定
scrollpup({
background: '#F00',
height: '20px'
})
JavaScriptに上記コードを記述するだけでOK。すごい。
簡潔で分かりやすいですね。
scrollpup.jsの実装イメージ

scrollpup.jsで設定できる項目
background
・・・バーの色height
・・・バーの高さ
CSSで指定する時と同じように設定できます。
scrollpup({
background: '#0089ff',
height: '50px'
})
プログレスバーの色をブルーに変更して、高さも大きめにしてみます。
scrollpup.jsの実装イメージ(設定変更)

少し強調されたイメージになりました。
通常のプログレスバー
Webページ上に通常の任意の割合などを可視化するようなプログレスバーの実装方法を紹介します。
各種プラグイン
- ProgressBar.js
- lineProgressbar.js
- jQMeter
- HTML5
それぞれの特徴やオプションを紹介します。
ProgressBar.js
ProgressBar.jsというJavaScriptプラグインを紹介します。
プログレスバーの形がいくつか用意されており、線・円・半円・カスタムの4タイプあります。それぞれのプログレスバーのタイプに加えて、配色やアニメーションの速度、数値(テキスト)の表示位置などを指定できます。
基本情報
- jQuery不要
- オプションあり
ProgressBar.jsの導入手順
- JavaScriptファイルのダウンロード・読み込み
- HTML・CSS・JavaScriptをコピペ
それぞれ詳しく説明します。
ProgressBar.jsのJSファイルのダウンロード・読み込み
下記リンクにアクセスし、右クリックでダウンロードを選択し、そのまま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>
ProgressBar.jsで使用するHTML・CSSをコピペ
下記URLにアクセスします。
ProgressBar.js
いくつかサンプルがありますが、まず「LINE」テーマの中から選択して、実装してみます。

左下の編集アイコンをクリックします。
HTML、CSS、JavaScript、実行結果が表示されており、その場でコードを変更して動作確認ができます。
とりあえず、それぞれコピペしてみます。
ProgressBar.jsで使用するHTML
<div id="container"></div>
HTMLこの1行のみでOKです。
ProgressBar.jsで使用するCSS
#container {
margin: 20px;
width: 400px;
height: 8px;
position: relative;
}
バーの幅と高さなどを指定します。
ProgressBar.jsで使用する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の実装イメージ

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

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

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

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

「CUSTOM」の実装イメージです。
公式では、ハートのプログレスバーがサンプルで紹介されています。
lineProgressbar.js
lineProgressbar.jsを使用してフラットデザインのプログレスバーを実装できます。配色・角丸の設定、アニメーションの有無、数値の表示切り替えなどのオプション数も10個用意されています。
基本情報
- jQuery必須
- オプションあり
lineProgressbar.jsの実装手順
- jQuery読み込み
- 必要なファイルをダウンロード・読み込み
- 各種コードを記述
まず、head
タグ内でjqueryを読み込みます。
lineProgressbar.jsのjQueryの読み込み
<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js?ver=1.11.3'></script>
lineProgressbar.jsで必要なファイルをダウンロード・読み込み
まず、下記リンクにアクセスします。
» jquery.lineProgressbar.js

右上のDownload
をクリックして、lineProgressbar.js
の実装に必要なファイルをダウンロードします。LineProgressbar-master.zip
という名前のzipファイルをダウンロードできたら、解凍します。
使用するファイルは下記の2つです。
lineProgressbar.jsで使用するファイル
jquery.lineProgressbar.css
jquery.lineProgressbar.js
使用するファイルを、サイトを運営しているサーバーの任意の場所へアップし、head
内にファイルを読み込むコードを記述します。
head内へ記述するコード
<link rel="stylesheet" href="(任意のパス)/jquery.lineProgressbar.css" />
<script src="(任意のパス)/jquery.lineProgressbar.js"></script>
各種コードを記述(lineProgressbar.js)
次に、動作させるための各種コードを記述します。
HTML(lineProgressbar.js)
<div id="progressbar1"></div>
HTMLはたった1行でもOKです(デフォルト)。
JavaScript(lineProgressbar.js)
$('#progressbar1').LineProgressbar();
デフォルト設定であれば、上記のJavaScriptを記述するだけで動作します。
かなりシンプルですね。
lineProgressbar.jsの実装イメージ
lineProgressbar.jsにはいくつかオプションが用意されています。
lineProgressbar.jsで設定できるオプション
オプション | 単位 | デフォルト | 詳細 |
percentage | 数値 | 100 | 表示する割合(パーセンテージ%) |
ShowProgressCount | boolean | true | 数値の表示切り替え (true:表示/false:非表示) |
animation | boolean | true | プログレスバーのアニメーションの有無切り替え (true:あり/false:なし) |
unit | 文字列 | % | プログレスバーの単位の指定 (km/hなど) |
duration | 数値or文字列 | 1000 | プログレスバーの進行速度の指定 ミリ秒(100, 1000, 5000のような感じ) ‘slow’ ‘fast’ |
fillBackgroundColor | 文字列 | ‘#3498db’ | プログレスバーの色 |
backgroundColor | 文字列 | ‘#EEEEEE’ | プログレスバーの背景 |
radius | 文字列 | ‘0px’ | 角丸の設定 |
height | 文字列 | ’10px’ | プログレスバーの高さ |
width | 文字列 | ‘100%’ | プログレスバーの幅 |
次に実装例を紹介します。
サンプル1の設定(lineProgressbar.js)
- パーセンテージ
- プログレスバーの背景
- プログレスバーの色
- プログレスバーの高さ
- プログレスバーの幅
サンプル1のJavaScript
$('#progressbar').LineProgressbar({
percentage: 80,
backgroundColor: '#f3dfcd',
fillBackgroundColor: '#e67e22',
height: '30px',
width: '50%'
});
サンプル2の設定(lineProgressbar.js)
- パーセンテージ
- プログレスバーの色
- プログレスバーの高さ
- 角丸
- 数値非表示
サンプル2のJavaScript
$('#progressbar3').LineProgressbar({
percentage: 60,
fillBackgroundColor: '#f1c40f',
height: '30px',
radius: '15px',
ShowProgressCount: false
}
ShowProgressCount: false
を設定することで、右下の数値を非表示にできます。
jQMeter
jQMeterではプログレスバーの配色、高さの設定などの基本的なオプションに加えて、バーを水平方向or垂直方向に切り替えたりアニメーションのスピードを設定することができます。
基本情報
- jQuery必須
- オプションあり
実装手順
- jQueryを読み込む
- jQMeterのJavaScriptファイルを読み込む
- ソースコード(HTML,JavaScript)を記述
大前提として、jQueryを読み込むコードを<head>
内に記述します。
head内に記述
<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js?ver=1.11.3'></script>
jQMeterのJavaScriptファイルを読み込む
下のリンクへアクセスし、右クリックでjqmeter.min.js
という名前をつけてローカルに保存します。
【ダウンロード】jqmeter.min.js
サーバの任意のディレクトリに、jqmeter.min.js
をアップロードして読み込みます。
これで動作前の準備はOKです。
直接読み込むと、下記のようなエラーメッセージがデベロッパーツール上に表示されます。
Mixed Content: The page at ‘(Page_url)’ was loaded over HTTPS, but requested an insecure script ‘(JavaScript_filepath)’. This request has been blocked; the content must be served over HTTPS.
簡単に言うと、「httpsのページから、httpのページへリクエストを送るのは安全ではありません。そのため、リクエストはブロックされました。」という意味で、jQMeterが正常に動作しません。
下記、jQMeter公式ページで基本的な使い方などが掲載されています。
» jQMeter公式ページ
jQMeterのHTML
HTMLは非常にシンプルで、下記1行のコードだけでOKです。
<div id="jqmeter-container" class="jqmeter"></div>
正確には、バーの色や大きさはjQMeterのオプションで指定します。
(後で指定するケースも紹介します。)
jQMeterのJavaScript
下記JavaScriptコードを記述します。
$(document).ready(function(){
$('#jqmeter-container').jQMeter({
goal:'1,000',
raised:'200',
meterOrientation:'vertical',
width:'50px',
height:'200px'
});
});
jQMeterの実装イメージ

縦のプログレスバーを実装することができました。
また、JQMeterには様々なオプションが用意されています。
jQMeterのオプション詳細
プロパティ | デフォルト | 説明 |
goal | 必須項目(デフォルトなし) | バーの目標(上限)設定。”$1,000″もしくは1000″といった半角英数字で指定します。 |
raised | 必須項目(デフォルトなし) | バーの割合(どこまで伸ばすか)設定。”$1,000″もしくは1000″といった半角英数字で指定します。 |
width | デフォルトで100%指定 | バーの幅を設定します。CSSと同じように、%もしくはpxで指定します。 |
height | デフォルトで50px指定 | バーの高さを設定します。CSSと同じように、%もしくはpxで指定します。 |
bgColor | #444がデフォルト | 16進数、RGB、文字列(red、blueなど)で指定します。 |
barColor | #bfd255がデフォルト | 16進数、RGB、文字列(red、blueなど)で指定します。 |
meterOrientation | horizontalがデフォルト | horizontal(水平方向)もしくは、vertical(垂直方向)で指定します。 verticalの設定時、幅と高さの指定が必須です。 |
displayTotal | true | バーの割合(%)をテキスト表示するかどうかの設定。 true:表示、false:非表示 |
animationSpeed | 2000 | 動作スピードをミリ秒で指定します。 |
counterSpeed | 2000 | カウントスピードをミリ秒で指定します。 |
オプションをある程度理解したところで、実際にオプションを指定して色々なプログレスバーを実装してみます。
横プログレスバー(%表示なし)
横プログレスバーに設定して、%表示なしにしています。
HTML
<div id="jqmeter-container"></div>
JavaScript
$(document).ready(function(){
$('#jqmeter-container').jQMeter({
goal:'1,000',
raised:'1,000',
meterOrientation:'horizontal',
width:'400px',
height:'50px',
barColor: 'red',
bgColor: '#dddddd',
displayTotal: false
});
});
実装イメージ

横プログレスバー(%表示あり、背景斜めストライプ)
横プログレスバーに設定して、%表示あり、背景斜めストライプにしています。
HTML
<div id="jqmeter-container" class="jqmeter"></div>
jqmeter
クラスを付与しています。
CSS
#jqmeter-container .outer-therm {background-image: repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(255,255,255,.5) 5px, rgba(255,255,255,.5) 10px);}
background-image
プロパティでrepeating-linear-gradient
を指定して、斜めストライプを背景にしています。
JavaScript
$(document).ready(function(){
$('#jqmeter-container').jQMeter({
goal:'1000',
raised:'777',
meterOrientation:'horizontal',
width:'400px',
height:'30px',
barColor: '#efa00f',
});
});
実装イメージ

HTML5
HTML5(progress
タグ、meter
)を紹介します。
progress
タグを使用すると、進行状況を可視化することができます。また、ブログ記事のカテゴリの割合を可視化するなどの場合は、meter
タグを使用します。
HTML5でのプログレスバー実装方法
- progressタグで実装する方法
- meterタグで実装する方法
まずは、progressタグで実装する方法を紹介します。
progress
タグはHTML5で追加されたフォームタグです。その名の通り、進行状況を可視化するために使用されます。
progress
タグの属性
属性 | 詳細 |
value | 実際に完了したタスクの作業量/0以上の数値(半角) |
max | 全タスクの総作業量/0以上の数値(半角) |
どちらも省略可能ですが、表示に違いが出ます(※下記参照)。
属性なし、もしくはmax属性のみ設定
<progress></progress>
もしくは
<progress max="100"></progress>
属性を何も指定しない、もしくはmax
属性のみ指定した場合はバーが左右に動き続けます。
ページ全体もしくは、何かしらの要素を読み込んでいる間に表示させて、進行中であることをユーザーに伝えることができます。
max属性とvalu属性を設定
<progress max="100" value="60"></progress>
max
属性とvalu
属性を両方設定する場合、max ≧ value
となるような数値にする必要があります。max
属性の値に対してのvalue
の割合をプログレスバーで可視化することができます。
例えば、サービスの申し込みフォームの入力の進捗状況をユーザーに分かりやすくすることができます。
項目が入力されると、value
属性の数値が上昇して、すべて入力したらmax=value
となるようにJavaScriptなどで設定すれば実現できそうです。
meter
タグで実装する方法
meter
タグはHTML5で追加されたフォームタグです。
ブログ記事のカテゴリの割合を可視化するなどの場合は、progressではなくてmeterが適しています。
meter
タグの属性
属性 | 詳細 |
value | 実際に表示する値(必須)/0以上の数値(半角) |
min | 最小値/0以上の数値 |
max | 最大値/0以上の数値 |
low | 「低い」と判定する値/0以上の数値 |
high | 「高い」と判定する値/0以上の数値 |
optimum | 最適な値/0以上の数値 |
min > max
、high > low
に設定する必要があります。
optimum > highに設定した場合の設定
- min:0
- max:100
- low:30
- high:70
- optimum:80
optimum > high
になるように値を設定します。
value < lowの場合
<meter min="0" max="100" low="30" high="70" optimum="80" value="20">20/100</meter>
optimum > high
に設定しているため、最も範囲に遠い範囲の値をvalue
に設定すると、ゲージの色は赤になります。
low ≦ value ≦ highの場合
<meter min="0" max="100" low="30" high="70" optimum="80" value="60">60/100</meter>
low ≦ value ≦ high
に設定しているため、2番目に遠い範囲の値をvalue
に設定すると、ゲージの色は黄色になります。
value ≧ highの場合
<meter min="0" max="100" low="30" high="70" optimum="80" value="90">90/100</meter>
value ≧ high
に設定しているため、最適な値の範囲にvalue
を設定した時にゲージの色は緑色になります。
optimum < lowに設定した場合の設定
- min:0
- max:100
- low:30
- high:70
- optimum:20
optimum < low
になるように値を設定します。
value ≦ lowの場合
<meter min="0" max="100" low="30" high="70" optimum="20" value="10">10/100</meter>
optimum ≦ low
に設定しているため、最適な値の範囲にvalue
を設定した時にゲージの色は緑色になります。
low ≦ value ≦ highの場合
<meter min="0" max="100" low="30" high="70" optimum="80" value="60">60/100</meter>
low ≦ value ≦ high
に設定しているため、2番目に遠い範囲の値をvalue
に設定すると、ゲージの色は黄色になります。
value > highの場合
<meter min="0" max="100" low="30" high="70" optimum="20" value="90">90/100</meter>
optimum > high
に設定しているため、最も範囲に遠い範囲の値をvalue
に設定すると、ゲージの色は赤になります。
ページ読み込み中に表示するプログレスバー
Webページ読み込み中に、読み込みの進捗を可視化したプログレスバーの実装方法を紹介します。PACE.jsというjQueryプラグインを紹介します。
用意されているテーマが14種類あります。配色とテーマを選択して、CSSをコピペするだけでプログレスバーを実装できます。
基本情報
- jQuery必須
- テーマあり
PACE.jsの実装手順
- jQueryを読み込む
- 公式サイトからjsファイルをダウンロードして読み込む
- テーマを選択してCSSをコピペ
まずjQueryを<head>
内に記述します。
head内への記述
<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js?ver=1.11.3'></script>
公式サイトからjsファイルをダウンロードして読み込む

下記URLにアクセスし、Downloadのところにある「PACE.JS」ボタンを右クリックし、名前をつけてリンク先のjsファイルpace.min.js
をローカルに保存します。
PACE — Automatic page load progress bars
保存したpace.min.js
をサイトをサーバの任意のディレクトリににアップロードします。
head内への記述
<script type="text/javascript" src="(任意のディレクトリ)/pace.min.js"></script>
アップロードしたpace.min.js
を<head>
内で読み込ませます。
次にテーマを選択してCSSをコピペします。公式に用意されている14種類の中からプログレスバーのテーマを選択可能です。
テーマの選び方
- 配色の選択
- テーマの選択
- 選択したテーマのCSSをコピペ
まず下記URLにアクセスします。
PACE — Automatic page load progress bars

ThemesのところにあるCHOOSE A COLOR
ボタンをクリックすると、配色を変更できます(デフォルトは水色)。
配色を決定したら、それぞれのテーマ名の下にあるCOPY TO CLIPBOARD
というテキストリンクがあるので、使いたいテーマのものをクリックして、テーマ用のCSSをコピーします。
コピーしたCSSを実装したいサイトのCSSにペーストすればOKです。
CSSも上記の手順でコピペするだけでOKです(記述すると長くなってしまうので省略)。

ほぼコピペしかしていませんが、これだけで動きます。すごい!
各テーマのイメージ
PACE.jsの公式ページから、テーマをいくつかピックアップして、配色を変えたものを実装してみました。
実装したいサイトのイメージに合ったものを選んでみてください。
Loading Bar

テーマの「Loading Bar」の実装イメージです。わかりやすい進捗度(%)つきのプログレスバーです。MAXが100%のシンプルなゲージをイメージしたものとなります。
Barber Shop

テーマの「Barber Shop」の実装イメージです。画面全体を使った、なかなかインパクトのあるわかりやすいプログレスバーを表現しています。
Center Circle

テーマの「Center Circle」の実装イメージです。その名の通りロード中に画面中央で円状のアイコンがくるくる回っており、アイコンの中に進捗度(%)が表示されています。進捗度が100になるまで回り続けます。
まとめ
どの方法も非常に簡単に導入できます。
使用する状況に応じて、使えそうな実装方法を選択してみてください。