GitHubで表示

進行状況

スタックされたバー、アニメーション背景、テキストラベルをサポートする、カスタムのBootstrap進行状況バーの使用に関するドキュメントと例。

使用方法

進捗状況コンポーネントは、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">
  <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100" 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-bar内にテキストを配置して、進捗状況バーにラベルを追加します。

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

高さ

.progressに対してのみ高さ値を設定するため、その値を変更すると、内側の.progress-barが自動的にその値に合わせてサイズが変更されます。

<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>
<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>

背景

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

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

複数のバー

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

<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" 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>

ストライプ

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

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

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

ストライプのグラデーションにアニメーションを付けることもできます。.progress-bar に .progress-bar-animated を追加すると、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>