Bootstrap3
日本語リファレンス

広告

プログレス・バー  Progress bars


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

サンプル
60%

ポイントは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>

表示サンプル

60% Complete

ソースコード

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

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

表示サンプル

60%

ソースコード

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

表示サンプル

0%
1%
2%
3%

ソースコード

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

表示サンプル

20%
100%
80%
60%
40%

ソースコード

<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 以下のブラウザではストライプにならない。

表示サンプル

20%
100%
80%
60%
40%

ソースコード

<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 以下のブラウザではストライプにならない。

表示サンプル

20%
100%
80%
60%
40%

ソースコード

<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つのプログレス・バーで表す、積み上げ式のプログレス・バー。

表示サンプル

20%
20%
10%
20%
5%

ソースコード

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

広告