プログレス・バー Progress bars

---

進捗状況を表すプログレス・バーに最適なコンポーネント。

---

使い方

ポイントは3つ。

1. class属性にprogressを指定したdiv要素を用意する。
2. 1のdiv要素内に、class属性にprogress-barを指定したdiv要素を配置する。
3. 2のdiv要素内のstyle属性のwidthプロパティに進捗割合を指定する。

<div class="progress">
	<div class="progress-bar" role="progressbar" style="width: 60%;">
		60%
	</div>
</div>

基本

表示サンプル

ソースコード

<div class="progress">
	<div class="progress-bar" role="progressbar" style="width: 60%;">
		<span class="sr-only">60% Complete</span>
	</div>
</div>

ラベル

class属性にprogressbarを指定したdiv要素内のテキストがラベルとなる。

表示サンプル

ソースコード

<div class="progress">
	<div class="progress-bar" role="progressbar" style="width: 60%;">
		60%
	</div>
</div>

低進捗度

表示サンプル

ソースコード

<div class="progress">
	<div class="progress-bar" role="progressbar" style="width: 0%;">
		0%
	</div>
</div>
<div class="progress">
	<div class="progress-bar" role="progressbar" style="width: 1%;">
		1%
	</div>
</div>
<div class="progress">
	<div class="progress-bar" role="progressbar" style="width: 2%;">
		2%
	</div>
</div>
<div class="progress">
	<div class="progress-bar" role="progressbar" style="width: 3%;">
		3%
	</div>
</div>

カラー・バリエーション

表示サンプル

ソースコード

<div class="progress">
	<div class="progress-bar" role="progressbar" style="width: 20%;">
		20%
	</div>
</div>
<div class="progress">
	<div class="progress-bar progress-bar-success" role="progressbar" style="width: 100%;">
		100%
	</div>
</div>
<div class="progress">
	<div class="progress-bar progress-bar-info" role="progressbar" style="width: 80%;">
		80%
	</div>
</div>
<div class="progress">
	<div class="progress-bar progress-bar-warning" role="progressbar" style="width: 60%;">
		60%
	</div>
</div>
<div class="progress">
	<div class="progress-bar progress-bar-danger" role="progressbar" style="width: 40%;">
		40%
	</div>
</div>

ストライプ

プログレス・バーをストライプ柄(縞模様)にする。ただし、Internet Explorer 8 以下のブラウザではストライプにならない。

表示サンプル

ソースコード

<div class="progress">
	<div class="progress-bar progress-bar-striped" role="progressbar" style="width: 20%;">
		20%
	</div>
</div>
<div class="progress">
	<div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" style="width: 100%;">
		100%
	</div>
</div>
<div class="progress">
	<div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" style="width: 80%;">
		80%
	</div>
</div>
<div class="progress">
	<div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" style="width: 60%;">
		60%
	</div>
</div>
<div class="progress">
	<div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" style="width: 40%;">
		40%
	</div>
</div>

アニメーション

プログレス・バーをアニメーション表示する。ただし、Internet Explorer 9 以下のブラウザではストライプにならない。

表示サンプル

ソースコード

<div class="progress">
	<div class="progress-bar progress-bar-striped active" role="progressbar" style="width: 20%;">
		20%
	</div>
</div>
<div class="progress">
	<div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" style="width: 100%;">
		100%
	</div>
</div>
<div class="progress">
	<div class="progress-bar progress-bar-info progress-bar-striped active" role="progressbar" style="width: 80%;">
		80%
	</div>
</div>
<div class="progress">
	<div class="progress-bar progress-bar-warning progress-bar-striped active" role="progressbar" style="width: 60%;">
		60%
	</div>
</div>
<div class="progress">
	<div class="progress-bar progress-bar-danger progress-bar-striped active" role="progressbar" style="width: 40%;">
		40%
	</div>
</div>

スタック・プログレス・バー

複数の進捗状況を1つのプログレス・バーで表す、積み上げ式のプログレス・バー。

表示サンプル

ソースコード

<div class="progress">
	<div class="progress-bar" role="progressbar" style="width: 20%;">
		20%
	</div>
	<div class="progress-bar progress-bar-success" role="progressbar" style="width: 20%;">
		20%
	</div>
	<div class="progress-bar progress-bar-info progress-bar-striped active" role="progressbar" style="width: 10%;">
		10%
	</div>
	<div class="progress-bar progress-bar-warning" role="progressbar" style="width: 20%;">
		20%
	</div>
	<div class="progress-bar progress-bar-danger progress-bar-striped active" role="progressbar" style="width: 5%;">
		5%
	</div>
</div>