プログレスバー

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

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

70%

デフォルトのプログレスバーを作成するには、 <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>