Skip to main content Skip to docs navigation
View on GitHub

プログレス Progress

積み重ねバー、アニメーション背景、およびテキストラベルのサポートを備えたBootstrapカスタムプログレスバーの使用に関するドキュメントと例です。

On this page

v5.3.0の新しいマークアップ — プログレスバーの以前のHTML構造を非推奨にし、よりアクセシブルなものに置き換えました。以前の構造はv6まで引き続き機能します。マイグレーションガイドで何が変更されたかを確認してください。

仕組み

Progressコンポーネントは、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 ユーティリティから.overflow-visibleを使用できます。

プログレスバー内のラベルがプログレスバーより長い場合、このメソッドを使用すると、.progressと.progress-barの両方の背景色に対してテキストの色が正しいコントラスト比を持つ必要があるため、完全にアクセシブルではない可能性があります。この例を実装する際は注意してください。

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

背景

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

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クラスで非表示にした追加テキストなどの代替手段を通じて含めてください。

カスタム背景色を持つプログレスバーにラベルを追加する場合は、ラベルが読みやすく、十分なコントラストがあるように、適切なテキストカラーも設定してください。color and backgroundヘルパークラスを使用することをお勧めします。

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 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-stackedを持つコンテナ内に複数のprogressコンポーネントを含めて、単一の積み重ねられたプログレスバーを作成できます。この場合、プログレスバーの視覚的な幅を設定するスタイルは、.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

変数

Added in 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; }
  }
}