マイクラ(Java版)の情報ブログ

その他

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

この記事の概要

Web制作者Web制作者

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

管理人管理人

色々な種類のプログレスバーを実装する方法を8つ紹介します。
参考にしてみてください!


本記事の内容

  • Webページでプログレスバーを実装する方法まとめ

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.jshead内で読み込ませます。

<script type='text/javascript' src='(任意のパス)/jquery.scrolline.js'></script>

動作用の下記JavaScriptコードをbodyタグ内に記述します。

$(function() {
	$.scrolline();
});

基本的には、これだけで動作します(デフォルト設定)。

Scrolline.jsの実装イメージ

Scrollinejs実装イメージ
画面上部に緑色のプログレスバーを表示できます。
スクロールを上下するとバーが増減します。

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の実装イメージ

Scrollinejsサンプル1

サンプル1のJavaScript

$.scrolline({
	reverse : true,
	position : 'bottom',
	backColor : '#cccccc',
	frontColor : '#009688',
	weight : 15
});
プログレスバーの配色、太さを変更して、位置を最下部に設定しました。
reverse : trueにすることで、通常左から右にプログレスバーが伸びるものを右から左に伸びるようにしています。

サンプル2の設定(Scrolline.js)

  • プログレスバーを縦に変更
  • プログレスバーの位置を右に変更
  • プログレスバーの背景色
  • プログレスバーの色
  • プログレスバーの透明度を変更
  • バーの高さ(太さ)

サンプル2の実装イメージ

Scrollinejs実装イメージ2

サンプル2のJavaScript

$.scrolline({
	direction : 'vertical',
	position : 'right',
	backColor : '#bbbbbb',
	frontColor : '#ffc107',
	opacity: 0.6,
	weight : 25
});
デフォルトではページ上部(横方向)に表示されますが、サンプル2ではページ右(縦方向)に表示しています。
また、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の実装イメージ

プログレスバーのイメージ
デフォルトはバーの色はエメラルドグリーンで、bodyタグを基準にプログレスバーが実装されます。

PrognRollにはいくつかオプションが用意されています。

PrognRollで設定できるオプション

オプション 単位 詳細
height px プログレスバーの高さを指定
color hex、rgb プログレスバーの色を指定
custom boolean(true/false) trueにすると、body以外に別のdiv要素を追加して、その要素上のスクロール量をプログレスバーに反映させる。

heightcolorは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

scrollpupjsのサンプルページ

真ん中に表示されている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.jshead内で読み込ませます。

<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」テーマの中から選択して、実装してみます。

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テーマ

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

CIRCLE

CIRCLEテーマ

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

SEMICIRCLE

SEMICIRCLEテーマ

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

CUSTOM

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の実装イメージ

デフォルトはバーの色はブルーで、ゲージは100%に設定されています。

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>
CDNを使用した方法がお手軽です。

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>
CSSコードの記述は基本的には無くてもOKです。
正確には、バーの色や大きさは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がデフォルト horizo​​ntal(水平方向)もしくは、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 > maxhigh > lowに設定する必要があります。

optimum > highに設定した場合の設定

  • min:0
  • max:100
  • low:30
  • high:70
  • optimum:80

optimum > highになるように値を設定します。

value < lowの場合

20/100

<meter min="0" max="100" low="30" high="70" optimum="80" value="20">20/100</meter>

optimum > highに設定しているため、最も範囲に遠い範囲の値をvalueに設定すると、ゲージの色は赤になります。

low ≦ value ≦ highの場合

60/100

<meter min="0" max="100" low="30" high="70" optimum="80" value="60">60/100</meter>

low ≦ value ≦ highに設定しているため、2番目に遠い範囲の値をvalueに設定すると、ゲージの色は黄色になります。

value ≧ highの場合

90/100

<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の場合

10/100

<meter min="0" max="100" low="30" high="70" optimum="20" value="10">10/100</meter>

optimum ≦ lowに設定しているため、最適な値の範囲にvalueを設定した時にゲージの色は緑色になります。

low ≦ value ≦ highの場合

60/100

<meter min="0" max="100" low="30" high="70" optimum="80" value="60">60/100</meter>

low ≦ value ≦ highに設定しているため、2番目に遠い範囲の値をvalueに設定すると、ゲージの色は黄色になります。

value > highの場合

80/100

<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ファイルをダウンロードして読み込む

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です。

HTMLは記述なしです。必要がありません。ライブラリによってプログレスバーを構成するHTMLが作成されます。
CSSも上記の手順でコピペするだけでOKです(記述すると長くなってしまうので省略)。
管理人管理人

ほぼコピペしかしていませんが、これだけで動きます。すごい!

各テーマのイメージ

PACE.jsの公式ページから、テーマをいくつかピックアップして、配色を変えたものを実装してみました。

実装したいサイトのイメージに合ったものを選んでみてください。

Loading Bar

Loading Bar

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

Barber Shop

Barber Shop

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

Center Circle

Center Circle

テーマの「Center Circle」の実装イメージです。その名の通りロード中に画面中央で円状のアイコンがくるくる回っており、アイコンの中に進捗度(%)が表示されています。進捗度が100になるまで回り続けます。

まとめ

どの方法も非常に簡単に導入できます。
使用する状況に応じて、使えそうな実装方法を選択してみてください。