その他

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

2020/06/16 (更新日: 2022/07/03)

この記事の概要

---

本記事の内容

• 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のオプション

Scrolline.jsが持つオプションの設定を変更して、カスタマイズしたプログレスバーを実装してみます（サンプル1～3）。

サンプル1の設定（Scrolline.js）

• プログレスバーの進行方向を逆にする
• プログレスバーの位置
• プログレスバーの背景色
• プログレスバーの色
• バーの高さ（太さ）

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

サンプル1のJavaScript

$.scrolline({
	reverse : true,
	position : 'bottom',
	backColor : '#cccccc',
	frontColor : '#009688',
	weight : 15
});

サンプル2の設定（Scrolline.js）

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

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

サンプル2のJavaScript

$.scrolline({
	direction : 'vertical',
	position : 'right',
	backColor : '#bbbbbb',
	frontColor : '#ffc107',
	opacity: 0.6,
	weight : 25
});

サンプル3の設定（Scrolline.js）

サンプル3はオプションで紹介したscrollEndを設定します。

サンプル3のJavaScript

$.scrolline({
    weight : 10,
    scrollEnd : function() {
		alert('スクロールを終了しました。');
	}
});

---

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、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で設定できるオプション

次に実装例を紹介します。

サンプル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
}

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のJavaScript

下記JavaScriptコードを記述します。

$(document).ready(function(){
	$('#jqmeter-container').jQMeter({
		goal:'1,000',
		raised:'200',
		meterOrientation:'vertical',
		width:'50px',
		height:'200px'
	});
});

jQMeterの実装イメージ

縦のプログレスバーを実装することができました。

また、JQMeterには様々なオプションが用意されています。

jQMeterのオプション詳細

オプションをある程度理解したところで、実際にオプションを指定して色々なプログレスバーを実装してみます。

横プログレスバー（%表示なし）

横プログレスバーに設定して、%表示なしにしています。

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タグの属性

どちらも省略可能ですが、表示に違いが出ます（※下記参照）。

属性なし、もしくは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タグの属性

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

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

各テーマのイメージ

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

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

Loading Bar

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

Barber Shop

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

Center Circle

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

まとめ

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

Programming