メインコンテンツへスキップ ドキュメントナビゲーションへスキップ
GitHubで表示

進捗状況

積み重ねられたバー、アニメーション付きの背景、テキストラベルのサポートを特徴とするBootstrapのカスタムプログレスバーの使用に関するドキュメントとサンプルです。

このページの内容
v5.3.0の新マークアップ — プログレスバーの以前のHTML構造は非推奨となり、よりアクセスしやすい構造に置き換えました。以前の構造はv6まで動作し続けます。移行ガイドで変更点を確認してください。

仕組み

プログレスコンポーネントは、2つのHTML要素、幅を設定するいくつかのCSS、およびいくつかの属性で構築されています。HTML5の<progress> 要素は使用せず、プログレスバーを積み重ねたり、アニメーション化したり、テキストラベルを重ねて配置したりできるようにしています。

  • .progressをラッパーとして使用し、プログレスバーの最大値を示します。
  • .progressラッパーには、アクセス可能にするためにrole="progressbar"およびaria属性も必要です。これには、アクセス可能な名前（aria-label、aria-labelledbyなどを使用）が含まれます。
  • 内部の.progress-barは、視覚的なバーとラベルのみに使用します。
  • .progress-barには、幅を設定するためのインラインスタイル、ユーティリティクラス、またはカスタムCSSが必要です。
  • 複数の/積み重ねられたプログレスバーを作成するために、特別な.progress-stackedクラスを提供しています。

これらをすべてまとめると、次の例のようになります。

html 
<div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar" style="width: 0%"></div>
</div>
<div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar" style="width: 25%"></div>
</div>
<div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar" style="width: 50%"></div>
</div>
<div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar" style="width: 75%"></div>
</div>
<div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar" style="width: 100%"></div>
</div>

バーのサイズ設定

幅

Bootstrapには、幅を設定するためのいくつかのユーティリティが用意されています。必要に応じて、これらは.progress-barの幅をすばやく構成するのに役立ちます。

html 
<div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar w-75"></div>
</div>

高さ

.progressコンテナにのみheight値を設定するため、その値を変更すると、内部の.progress-barはそれに応じて自動的にサイズ変更されます。

html 
<div class="progress" role="progressbar" aria-label="Example 1px high" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="height: 1px">
  <div class="progress-bar" style="width: 25%"></div>
</div>
<div class="progress" role="progressbar" aria-label="Example 20px high" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="height: 20px">
  <div class="progress-bar" style="width: 25%"></div>
</div>

ラベル

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

25%
html 
<div class="progress" role="progressbar" aria-label="Example with label" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar" style="width: 25%">25%</div>
</div>

デフォルトでは、.progress-bar内のコンテンツはoverflow: hiddenで制御されているため、バーからはみ出さないことに注意してください。プログレスバーがラベルよりも短い場合、コンテンツは制限され、読みにくくなる可能性があります。この動作を変更するには、オーバーフローユーティリティの.overflow-visibleを使用できますが、テキストが読めるように、明示的なテキストの色も定義してください。ただし、現時点では、このアプローチはカラーモードを考慮していないことに注意してください。

プログレスバーの長いラベルテキスト、濃い色に設定
html 
<div class="progress" role="progressbar" aria-label="Example with label" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar overflow-visible text-dark" style="width: 10%">Long label text for the progress bar, set to a dark color</div>
</div>

背景

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

html 
<div class="progress" role="progressbar" aria-label="Success example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar bg-success" style="width: 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 bg-info" style="width: 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 bg-warning" style="width: 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 bg-danger" style="width: 100%"></div>
</div>
アクセシビリティのヒント: 色を使用して意味を追加することは、視覚的な表示を提供するだけであり、スクリーンリーダーなどの支援技術のユーザーには伝わりません。意味がコンテンツ自体から明らかであること（例：十分な色のコントラストを持つ目に見えるテキスト）を保証するか、.visually-hiddenクラスで隠された追加のテキストなど、代替手段を通じて含まれていることを確認してください。

カスタムの背景色を持つプログレスバーにラベルを追加する場合は、ラベルが読めるように、適切なテキストの色も設定してください。十分なコントラストを確保してください。

25%
50%
75%
100%
html 
<div class="progress" role="progressbar" aria-label="Success example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar 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 bg-info text-dark" 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 bg-warning text-dark" 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 bg-danger" style="width: 100%">100%</div>
</div>

または、新しい組み合わせの色と背景ヘルパークラスを使用することもできます。

75%
html 
<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>

複数のバー

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

html 
<div class="progress-stacked">
  <div class="progress" role="progressbar" aria-label="Segment one" 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="Segment two" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width: 30%">
    <div class="progress-bar bg-success"></div>
  </div>
  <div class="progress" role="progressbar" aria-label="Segment three" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <div class="progress-bar bg-info"></div>
  </div>
</div>

ストライプ

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

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

アニメーション付きストライプ

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

html 
<div class="progress" role="progressbar" aria-label="Animated striped example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 75%"></div>
</div>

CSS

変数

v5.2.0で追加

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

scss/_progress.scss 
--#{$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変数

scss/_variables.scss 
$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;

キーフレーム

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

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