メインコンテンツへスキップ

プログレスバー(Progress)

縦積みバー、アニメーションの背景、およびテキストラベルをサポートするBootstrapのカスタムプログレスバーの使用に関する解説と例

目次

使い方(How it works)

プログレスコンポーネントは、2つのHTML要素、幅を設定するCSS、いくつかの属性で構築。HTML5の <progress> 要素を使用せずに、プログレスバーを縦積みにしたり、アニメーション化したり、テキストラベルの貼り付けが可能。

  • .progress を包括用に使用し、プログレスバーの最大値を示す。
  • これまでの進行状況を示すために、内側に .progress-bar を使用。
  • .progress-bar には、幅を設定するためのインライン・スタイル、ユーティリティクラス、カスタムCSSが必要。
  • .progress-bar には、アクセシビリティのためにいくつかの role 属性と aria 属性も必要。

そのすべてをまとめると、次の例のようになる。

見本
設定例
<div class="progress">
	<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress mt-3">
	<div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
...

Bootstrapは、幅設定ユーティリティをいくつか提供している。ニーズに応じて、これらは進捗状況を迅速に設定するのに役立つ。

見本
設定例
<div class="progress">
	<div class="progress-bar w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
【設定】
  • .progress > .progress-bar
  • .progress-barstyle="width:**%;".w-{size} を入れて表示したいバーの幅の割合を設定
【注意】
  • プログレスバーを複数並べる場合、プログレスバーの間には空白がないので、.progress空白ユーティリティクラスを追加する必要がある(上記の見本では2つ目以降のプログレスバーで上のマージンを1remに設定)
アクセシビリティの設定】
  • .progress-bar
    • role="progressbar"(プログレスバーの役割)
    • aria-valuenow(現在値)
    • aria-valuemin(最小値)
    • aria-valuemax(最大値)
    の各属性を入れる

 

ラベル(Labels)

.progress-bar 内にテキストを配置して、プログレスバーにラベルを追加。

見本

●バーの中にラベルを表示

25%

●バーの外にラベルを表示

25%
Bootstrap5.xの設定例 緑背景が変更箇所
バーの中にラベルを表示<div class="progress">
	<div class="progress-bar" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width:25%;">25%</div>
</div>
バーの外にラベルを表示<div class="progress">
	<div class="progress-bar" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width:25%;"></div>
	<span class="ms-1">25%</span>
</div>
【設定】
  • バーの中にラベルを表示:.progress > .progress-bar > 《ラベル》
  • バーの外にラベルを表示:.progress > [.progress-bar + span.ms-1《ラベル》](バーとラベルの間は span.ms-1 でマージンを設定)

太さ(Height)

.progress にのみ height の値を設定。その値を変更すると、内側の .progress-bar はそれに応じて自動的にサイズが変更。

見本

height:1px の場合

height:20px の場合

※標準の太さ(height:1rem

設定例
height:1pxの場合<div class="progress" style="height: 1px;">
	<div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
height:20pxの場合<div class="progress" style="height: 20px;">
	<div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
【設定】
  • .progressstyle="height:**;" を入れる(デフォルトのサイズは1rem=16px)

背景色(Backgrounds)

背景色ユーティリティクラスを使用して、個々のプログレスバーの外観を変更。

バーの色の種類

※Primary(Default):(.progress-bar の単独使用)

Secondary:.bg-secondary

Info:.bg-info

Success:.bg-success

Warning:.bg-warning

Danger:.bg-danger

Light:.bg-light

Dark:.bg-dark

設定例
<div class="progress">
	<div class="progress-bar bg-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width:20%"></div>
</div>
【設定】
  • .progress-bar.bg-{themecolor}.bg-{themecolor} は上記の「バーの色の種類」から選択、Primaryの場合は不要)を追加

複数バー(Multiple bars)

必要に応じて、プログレスバーコンポーネントに複数のプログレスバーを含める。

見本
設定例
<div class="progress">
	<div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
	<div class="progress-bar bg-success progress-bar-striped" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
	<div class="progress-bar bg-info" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
</div>
【設定】
  • div.progress の中に複数の異なる色の div.progress-bar を追加
  • 一部をストライプやアニメーションにすることも可能
【注意】
  • width の合計が100%を超えたら、各バーの幅は自動調整される

ストライプ(Striped)

.progress-bar-striped を任意の .progress-bar に追加して、プログレスバーの背景色にCSSグラデーションを使用してストライプを適用。

見本
設定例
<div class="progress">
	<div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
</div>
【設定】
  • .progress-bar.progress-bar-striped を追加

アニメーションストライプ(Animated stripes)

ストライプ・グラデーションはアニメートすることも可能。.progress-bar-animated.progress-bar に追加すると、CSS3アニメーションを使用してストライプを右から左にアニメーション表示。

見本
設定例
<div class="progress">
	<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
</div>
【設定】
  • .progress-bar.progress-bar-striped.progress-bar-animated を追加