メインコンテンツにスキップ ドキュメントナビゲーションにスキップ

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

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

※"v5.0.0"での変更はv5.0.0-alpha版、v5.0.0-beta版での変更も含みます。

※"v5.2.0"での変更はv5.2.0-beta1での変更も含みます。
※"v5.3.0"での変更はv5.3.0-alpha版での変更も含みます。
このページの項目 v5.3.0設定変更

使い方（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>
【設定】

太さ（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）v5.3.0設定追加

.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-bar 内のコンテンツは overflow: hidden で制御され、バーからはみ出さないので注意して下さい。プログレスバーの長さがラベルよりも短い場合、ラベルの内容は制限され読めない可能性がある。この動作を変更するには、はみ出しユーティリティの .overflow-visible を使用し、テキストが読めるように明示的な文字色も定義して下さい（デフォルトの白字だとライトモードではみ出し部分が読みにくい）。ただし、この方法ではカラーモードを考慮していないので注意して下さい（.text-body-emphasis などの使用がお勧め）。v5.3.0追加

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

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

プログレスバーの長いラベルテキスト、文字はカラーモード対応に設定している
設定例
<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 > .progress-bar > 《ラベル》
  • バーの外にラベルを表示：.progress > [.progress-bar + span.ms-1《ラベル》]（バーとラベルの間は span.ms-1 でマージンを設定）
  • ラベルがバーより長い場合：.progress-bar に .overflow-visible.text-body-emphasis を追加
【変更履歴】
  • 【v5.3.0】
    • ラベルがバーより長い場合の設定方法が追加

背景色（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>
【設定】
  • .progress-bar に .bg-{color}（背景色ユーティリティ、上記の「バーの色の種類」から選択、Primaryの場合は不要）を追加

複数バー（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; }
  }
}