プログレスバー

ベーシックプログレスバー

プログレスバーを使用すると、ユーザーがプロセスにどれだけ近づいているかを示すことができます。
Bootstrapにはいくつかのタイプのプログレスバーがあります。
Bootstrapのデフォルトのプログレスバーは次のようになります。

デフォルトのプログレスバーを作成するには、 <div> 要素に .progress クラスを追加します。

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%">
    <span class="sr-only">70%</span>
  </div>
</div>

注：プログレスバーは、Internet Explorer 9以前ではサポートされていません（CSS3のトランジションとアニメーションを使用して効果を得るため）。
スクリーンリーダーを使用するユーザーのアクセシビリティを向上させるには、 aria-* 属性を含める必要があります。

プログレスバーとラベル

プログレスバーから .sr-only クラスを削除して、パーセンテージを表示する。

70%

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

色付け

プログレスバーで使用できる色は次のとおりです。

.progress-bar-success
.progress-bar-info
.progress-bar-warning
.progress-bar-danger

40% (success)

50% (info)

60% (warning)

70% (danger)

<div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40"
  aria-valuemin="0" aria-valuemax="100" style="width:40%">
    40% (success)
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="50"
  aria-valuemin="0" aria-valuemax="100" style="width:50%">
    50% (info)
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60"
  aria-valuemin="0" aria-valuemax="100" style="width:60%">
    60% (warning)
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="70"
  aria-valuemin="0" aria-valuemax="100" style="width:70%">
    70% (danger)
  </div>
</div>

ストライプ

プログレスバーをストライプにするためは .progress-bar-striped クラスを使用します。

40% (success)

50% (info)

60% (warning)

70% (danger)

<div class="progress">
  <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40"
  aria-valuemin="0" aria-valuemax="100" style="width:40%">
    40% (success)
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="50"
  aria-valuemin="0" aria-valuemax="100" style="width:50%">
    50% (info)
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60"
  aria-valuemin="0" aria-valuemax="100" style="width:60%">
    60% (warning)
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="70"
  aria-valuemin="0" aria-valuemax="100" style="width:70%">
    70% (danger)
  </div>
</div>

アニメーション

プログレスバーをアニメーションさせるには .active クラスを使用します。

70%

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

パーセンテージの累積

パーセンテージを累積するには <div class="progress"> 内に複数のプログレスバーを入れます。

Free Space

Warning

Danger

<div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" style="width:40%">
    Free Space
  </div>
  <div class="progress-bar progress-bar-warning" role="progressbar" style="width:10%">
    Warning
  </div>
  <div class="progress-bar progress-bar-danger" role="progressbar" style="width:20%">
    Danger
  </div>
</div>