プログレスバー（Progress） v5.3.0設定変更

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

※"v5.2.0"での変更はv5.2.0-beta1での変更も含みます。
※"v5.3.0"での変更はv5.3.0-alpha版での変更も含みます。

このページの項目 v5.3.0設定変更

v5.3.0での新しいマークアップ— プログレスバーの以前のHTML構造を非推奨とし、よりアクセスしやすいものに置き換えた。従来の設定構造は、v6まで引き続き使用可能。

使い方（How it works）v5.2.0デザイン変更、v5.3.0設定変更

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

.progress を包括用に使用し、プログレスバーの最大値を示す。
また .progress は、role="progressbar" と aria 属性を必要とし、アクセシビリティに配慮した名前（ aria-label, aria-labelledby などを使用）を含む。
内側の .progress-bar は、純粋にビジュアルバーとラベルのために使用。
.progress-bar には、幅を設定するためのインライン・スタイル、ユーティリティクラス、カスタムCSSが必要。
複数のプログレスバーを作成するために、別途 .progress-stacked クラスを提供。

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

見本

Bootstrap5.3.0の設定例緑背景が5.3.0での変更箇所

<div class="progress" role="progressbar" aria-label="基本の実例" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar" style="width: 0%"></div>
</div>
<div class="progress mt-3" role="progressbar" aria-label="基本の実例" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar" style="width: 25%"></div>
</div>
<div class="progress mt-3" role="progressbar" aria-label="基本の実例" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar" style="width: 50%"></div>
</div>
<div class="progress mt-3" role="progressbar" aria-label="基本の実例" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar" style="width: 75%"></div>
</div>
<div class="progress mt-3" role="progressbar" aria-label="基本の実例" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar" style="width: 100%"></div>
</div>

※Bootstrap5.2.xの設定例赤背景が5.3.0での変更箇所

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-label="基本の実例" 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-label="基本の実例" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress mt-3">
  <div class="progress-bar" role="progressbar" style="width: 75%;" aria-label="基本の実例" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress mt-3">
  <div class="progress-bar" role="progressbar" style="width: 100%;" aria-label="基本の実例" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>

【設定】

.progress > .progress-bar
.progress-bar に style="width:**%;" を入れて表示したいバーの幅の割合を設定

【注意】

プログレスバーを複数並べる場合、プログレスバーの間には空白がないので、.progress に空白ユーティリティクラスを追加する必要がある（上記の見本では2つ目以降のプログレスバーで上のマージンを1remに設定）

【アクセシビリティの設定】

.progress に
- role="progressbar"（プログレスバーの役割）
- aria-label（ビジュアルで目的を表現する要素に対するラベル付け）
- aria-valuenow（現在値）
- aria-valuemin（最小値）
- aria-valuemax（最大値）
の各属性を入れる

【変更履歴】

【v5.2.0】
- border-radius の値を調整したので、若干丸みを帯びたデザインに変更
- .progress-bar に [aria-label] を入れる
【v5.3.0】
- 各アクセシビリティ属性の設定要素が .progress-bar から .progress に変更（一部のスクリーン・リーダーがゼロ値のプログレスバーを認識しなかったため）
  ※従来のプログレスバーの設定でもこれまで通り機能するが、すべてのスクリーン・リーダーとの互換性を高めるために、新しいマークアップを推奨。
- 0%のときは .progress-bar に style="width: 0%" を入れる

バーのサイズ（Bar sizing）v5.3.0再構成

長さ（Width）

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

見本

Bootstrap5.3.0の設定例緑背景が5.3.0での変更箇所

<div class="progress" role="progressbar" aria-label="基本の実例" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar w-75"></div>
</div>

※Bootstrap5.2.xの設定例赤背景が5.3.0での変更箇所

<div class="progress">
  <div class="progress-bar w-75" role="progressbar" aria-label="基本の実例" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>

【設定】

.progress-bar に .w-{size}（割合幅ユーティリティクラス）を入れても可

太さ（Height）

.progress コンテナに高さの値を設定するだけなので、その値を変更すると、内側の .progress-bar はそれに応じて自動的にサイズが変更。

見本

height:1px の場合

height:20px の場合

デフォルトの太さ（height:1rem）

Bootstrap5.3.0の設定例緑背景が5.3.0での変更箇所

height:1pxの場合<div class="progress" role="progressbar" aria-label="高さ1pxの実例" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="height: 1px;">
  <div class="progress-bar" style="width: 25%;"></div>
</div>

height:20pxの場合<div class="progress" role="progressbar" aria-label="高さ20pxの実例" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="height: 20px;">
  <div class="progress-bar" style="width: 25%;"></div>
</div>

※Bootstrap5.2.xの設定例赤背景が5.3.0での変更箇所

height:1pxの場合<div class="progress" style="height: 1px;">
  <div class="progress-bar" role="progressbar" aria-label="高さ1pxの実例" 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" aria-label="高さ20pxの実例" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>

【設定】

.progress に style="height:**;" を入れる（デフォルトのサイズは1rem=16px）

ラベル（Labels）

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

見本

バーの中にラベルを表示

25%

バーの外にラベルを表示

25%

Bootstrap5.3.0の設定例緑背景が5.3.0での変更箇所

バーの中にラベルを表示<div class="progress" role="progressbar" aria-label="ラベル付きの実例" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar" style="width:25%;">25%</div>
</div>

バーの外にラベルを表示<div class="progress" role="progressbar" aria-label="ラベル付きの実例" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar" style="width:25%;"></div>
  <span class="ms-1">25%</span>
</div>

※Bootstrap5.2.xの設定例赤背景が5.3.0での変更箇所

バーの中にラベルを表示<div class="progress">
  <div class="progress-bar" role="progressbar" aria-label="ラベル付きの実例" 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-label="ラベル付きの実例" 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 でマージンを設定）

長いラベル（Long labels）v5.3.0追加、v5.3.4項目として独立

デフォルトでは、.progress-bar 内のコンテンツは overflow: hidden で制御され、バーからはみ出さないので注意してください。プログレスバーの長さがラベルよりも短い場合、ラベルの内容は制限され読めない可能性がある。この動作を変更するには、はみ出しユーティリティの .overflow-visible を使用し、テキストが読めるように明示的な文字色も定義してください（デフォルトの白字だとライトモードではみ出し部分が読みにくい）。

この方法では、.progress と .progress-bar の両方の背景色と正しいコントラスト比を持つテキスト色に依存するため、プログレスバーより長いラベルは完全にアクセスできない可能性があるので、これを実装する際には注意してください。

テキストがプログレスバーと重なる可能性がある場合は、アクセシビリティを向上させるために、ラベルをプログレスバーの外側に表示することを推奨。

見本

プログレスバーの長いラベルテキスト、文字はカラーモード対応に設定している

デフォルトの場合（参考）

プログレスバーの長いラベルテキスト、文字はカラーモード対応に設定している

設定例

<div class="progress" role="progressbar" aria-label="ラベル付きの実例" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar overflow-visible text-body-emphasis" style="width: 10%">プログレスバーの長いラベルテキスト、文字はカラーモード対応に設定している</div>
</div>

【設定】

.progress-bar に .overflow-visible.text-body-emphasis を追加

背景色（Backgrounds）

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

バーの色の種類

Primary（デフォルト）：（.progress-bar の単独使用）

Secondary：.bg-secondary

Success：.bg-success

Danger：.bg-danger

Warning：.bg-warning

Info：.bg-info

Light：.bg-light

Dark：.bg-dark

Bootstrap5.3.0の設定例緑背景が5.3.0での変更箇所

<div class="progress" role="progressbar" aria-label="Infoの実例" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar bg-info" style="width:20%"></div>
</div>

※Bootstrap5.2.xの設定例赤背景が5.3.0での変更箇所

<div class="progress">
  <div class="progress-bar bg-info" role="progressbar" aria-label="Infoの実例" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width:20%"></div>
</div>

アクセシビリティのヒント：意味を付加するために（"赤"とか"青"とか）カラー名を使用しても、視覚的な表示を提供するだけでスクリーン・リーダーのような支援技術のユーザーには伝わらない。意味は、（十分なカラーコントラストを持つ可視テキストなどの）文脈自体で明白にするか、.visually-hidden クラスで非表示にした追加テキストなどの代替手段を入れるように心がけてください。

任意の背景色を持つプログレスバーにラベルを追加する場合は、ラベルの読みやすさと十分なコントラストを確保するために、適切な文字色も設定してください。文字&背景色ヘルパークラスの使用を推奨。v5.3.4追加

見本

25%

50%

75%

100%

設定例

<div class="progress" role="progressbar" aria-label="Success example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar text-bg-success" style="width: 25%">25%</div>
</div>
<div class="progress" role="progressbar" aria-label="Info example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar text-bg-info" style="width: 50%">50%</div>
</div>
<div class="progress" role="progressbar" aria-label="Warning example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar text-bg-warning" style="width: 75%">75%</div>
</div>
<div class="progress" role="progressbar" aria-label="Danger example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar text-bg-danger" style="width: 100%">100%</div>
</div>

【設定】

.progress-bar に .bg-{color}（背景色ユーティリティ、上記の「バーの色の種類」から選択、Primaryの場合は不要）を追加
ラベルを追加する場合は .bg-{color} ではなく、.text-bg-{color}（文字&背景色ヘルパー）を追加

複数バー（Multiple bars）v5.3.0設定変更

複数のプログレスコンポーネントを .progress-stacked と共にコンテナ内に含めると、1つの積み重ねられたプログレスバーを作成ができる。この場合、プログレスバーの視覚的な幅を設定するスタイリングは .progress-bar ではなく .progress 要素に適用する必要がある。

見本

Bootstrap5.3.0の設定例緑背景が5.3.0での変更箇所

<div class="progress-stacked">
  <div class="progress" role="progressbar" aria-label="セグメント1" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100" style="width: 15%">
    <div class="progress-bar"></div>
  </div>
  <div class="progress" role="progressbar" aria-label="セグメント2" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width: 30%">
    <div class="progress-bar bg-success progress-bar-striped"></div>
  </div>
  <div class="progress" role="progressbar" aria-label="セグメント3" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <div class="progress-bar bg-info"></div>
  </div>
</div>

※Bootstrap5.2.xの設定例赤背景が5.3.0での変更箇所

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-label="セグメント1" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="progress-bar bg-success progress-bar-striped" role="progressbar" aria-label="セグメント2" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="progress-bar bg-info" role="progressbar" aria-label="セグメント3" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
</div>

【設定】

.progress-stacked の中に複数の異なる色の div.progress > div.progress-bar を追加
style="width:**%;" は .progress-bar ではなく、.progress にいれる
一部をストライプやアニメーションにもできる

【注意】

width の合計が100%を超えたら、各バーの幅は自動調整される

【変更履歴】

【v5.3.0】
- .progress > (.progress-bar + .progress-bar) ⇒ .progress-stacked > ((.progress > .progress-bar) + (.progress > .progress-bar))

ストライプ（Striped）

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

見本

Bootstrap5.3.0の設定例緑背景が5.3.0での変更箇所

<div class="progress" role="progressbar" aria-label="Infoのストライプの実例" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar progress-bar-striped bg-info" style="width: 10%"></div>
</div>

※Bootstrap5.2.xの設定例赤背景が5.3.0での変更箇所

<div class="progress">
  <div class="progress-bar progress-bar-striped bg-info" role="progressbar" aria-label="Infoのストライプの実例" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" style="width: 10%"></div>
</div>

【設定】

.progress-bar に .progress-bar-striped を追加

アニメーションストライプ（Animated stripes）

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

見本

Bootstrap5.3.0の設定例緑背景が5.3.0での変更箇所

<div class="progress" role="progressbar" aria-label="アニメーションのストライプの実例" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 75%"></div>
</div>

※Bootstrap5.2.xの設定例赤背景が5.3.0での変更箇所

<div class="progress">
  <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-label="アニメーションのストライプの実例" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
</div>

【設定】

.progress-bar.progress-bar-striped に .progress-bar-animated を追加

CSS v5.0.0-beta3追加、v5.2.0Sassから名称変更

CSS変数（Variables）v5.2.0新設

Bootstrapの進化するCSS変数アプローチの一環として、プログレスバーは、リアルタイムのカスタマイズを強化するために、.progress でローカルCSS変数を使用するようにした。CSS変数の値はSassを経由して設定されるため、Sassのカスタマイズも引き続きサポートされる。

デフォルトの設定

scss/_progress.scss 内 progress-css-vars の設定--#{$prefix}progress-height: #{$progress-height};
@include rfs($progress-font-size, --#{$prefix}progress-font-size);
--#{$prefix}progress-bg: #{$progress-bg};
--#{$prefix}progress-border-radius: #{$progress-border-radius};
--#{$prefix}progress-box-shadow: #{$progress-box-shadow};
--#{$prefix}progress-bar-color: #{$progress-bar-color};
--#{$prefix}progress-bar-bg: #{$progress-bar-bg};
--#{$prefix}progress-bar-transition: #{$progress-bar-transition};

Sass変数（Sass variables）v5.2.0変数から名称変更

デフォルトの設定

scss/_variables.scss 内 progress-variables の設定$progress-height:                   1rem;
$progress-font-size:                $font-size-base * .75;
$progress-bg:                       var(--#{$prefix}secondary-bg);
$progress-border-radius:            var(--#{$prefix}border-radius);
$progress-box-shadow:               var(--#{$prefix}box-shadow-inset);
$progress-bar-color:                $white;
$progress-bar-bg:                   $primary;
$progress-bar-animation-timing:     1s linear infinite;
$progress-bar-transition:           width .6s ease;

キーフレーム（Keyframes）

.progress-bar-animated のCSSアニメーションを作成するために使用される。scss/_progress.scss に組み込まれている。

デフォルトの設定

scss/_progress.scss 内 progress-keyframes の設定@if $enable-transitions {
  @keyframes progress-bar-stripes {
    0% { background-position-x: $progress-height; }
  }
}

前のページ
ポップオーバー

次のページ
スクロールスパイ

プログレスバー（Progress） v5.3.0設定変更

使い方（How it works）v5.2.0デザイン変更、v5.3.0設定変更

見本

Bootstrap5.3.0の設定例 緑背景が5.3.0での変更箇所

※Bootstrap5.2.xの設定例 赤背景が5.3.0での変更箇所

【設定】

【注意】

【アクセシビリティの設定】

【変更履歴】

バーのサイズ（Bar sizing）v5.3.0再構成

長さ（Width）

見本

Bootstrap5.3.0の設定例 緑背景が5.3.0での変更箇所

※Bootstrap5.2.xの設定例 赤背景が5.3.0での変更箇所

【設定】

太さ（Height）

見本

Bootstrap5.3.0の設定例 緑背景が5.3.0での変更箇所

※Bootstrap5.2.xの設定例 赤背景が5.3.0での変更箇所

【設定】

ラベル（Labels）

見本

Bootstrap5.3.0の設定例 緑背景が5.3.0での変更箇所

※Bootstrap5.2.xの設定例 赤背景が5.3.0での変更箇所

【設定】

長いラベル（Long labels）v5.3.0追加、v5.3.4項目として独立

見本

設定例

【設定】

背景色（Backgrounds）

バーの色の種類

Bootstrap5.3.0の設定例 緑背景が5.3.0での変更箇所

※Bootstrap5.2.xの設定例 赤背景が5.3.0での変更箇所

見本

設定例

【設定】

複数バー（Multiple bars）v5.3.0設定変更

見本

Bootstrap5.3.0の設定例 緑背景が5.3.0での変更箇所

※Bootstrap5.2.xの設定例 赤背景が5.3.0での変更箇所

【設定】

【注意】

【変更履歴】

ストライプ（Striped）

見本

Bootstrap5.3.0の設定例 緑背景が5.3.0での変更箇所

※Bootstrap5.2.xの設定例 赤背景が5.3.0での変更箇所

【設定】

アニメーションストライプ（Animated stripes）

見本

Bootstrap5.3.0の設定例 緑背景が5.3.0での変更箇所

※Bootstrap5.2.xの設定例 赤背景が5.3.0での変更箇所

【設定】

CSS v5.0.0-beta3追加、v5.2.0Sassから名称変更

CSS変数（Variables）v5.2.0新設

デフォルトの設定

Sass変数（Sass variables）v5.2.0変数から名称変更

デフォルトの設定

キーフレーム（Keyframes）

デフォルトの設定

ページ移動

Bootstrap5.3.0の設定例緑背景が5.3.0での変更箇所

※Bootstrap5.2.xの設定例赤背景が5.3.0での変更箇所

Bootstrap5.3.0の設定例緑背景が5.3.0での変更箇所

※Bootstrap5.2.xの設定例赤背景が5.3.0での変更箇所

Bootstrap5.3.0の設定例緑背景が5.3.0での変更箇所

※Bootstrap5.2.xの設定例赤背景が5.3.0での変更箇所

Bootstrap5.3.0の設定例緑背景が5.3.0での変更箇所

※Bootstrap5.2.xの設定例赤背景が5.3.0での変更箇所

Bootstrap5.3.0の設定例緑背景が5.3.0での変更箇所

※Bootstrap5.2.xの設定例赤背景が5.3.0での変更箇所

Bootstrap5.3.0の設定例緑背景が5.3.0での変更箇所

※Bootstrap5.2.xの設定例赤背景が5.3.0での変更箇所

Bootstrap5.3.0の設定例緑背景が5.3.0での変更箇所

※Bootstrap5.2.xの設定例赤背景が5.3.0での変更箇所

Bootstrap5.3.0の設定例緑背景が5.3.0での変更箇所

※Bootstrap5.2.xの設定例赤背景が5.3.0での変更箇所