Bootstrap3 Progress bars の使い方

Pocket

進行状況を表示するのに使えるのがProgressバーコンポーネント。Webアプリやショップサイトで注文工程の進歩状況を表示する際に使うことができます。

Bootstrap3 Progressバーの書き方

Progressバーを作るには.progressclassの直下にprogress-barを入れるだけ。幅の指定はstyle="width: 50%;"のようにstyle属性を入れてあげる必要があります。

Class名 概要
.progress Progress
.progress > .progress-bar バーを表示、幅はstyle属性で指定
<!-- ProgressBar -->
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    <span>60%</span>
  </div>
</div>

ProgressBarのスタイルバリエーション

Progressバーはデフォルトで青色のバーが表示されますが、カラーのclassを追加することで変更が可能。また、ストライプスタイルにしたり、アニメーションを追加することができます。

特にclassを変更する必要はありませんが、バーをスタック(積み重ね)することも可能です。

Class名 概要
.progress-bar.progress-bar-succes 緑色のバーを表示
.progress-bar.progress-bar-info 水色のバーを表示
.progress-bar.progress-bar-warning 黄色のバーを表示
.progress-bar.progress-bar-danger 赤色のバーを表示
.progress-bar.progress-bar-striped ストライプスタイルに変更
.progress-bar.progress-bar-striped.active アニメーションを追加
<!-- ProgressBarのカラーバリエーション -->
<div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span>40%</span>
  </div>
</div>

<!-- ストライプ -->
<div class="progress">
  <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span>20%</span>
  </div>
</div>

<!-- アニメーション -->
<div class="progress">
  <div class="progress-bar progress-bar-warning progress-bar-striped active" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span>30%</span>
  </div>
</div>

<!-- スタック -->
<div class="progress">
  <div class="progress-bar progress-bar-success" style="width: 35%">
    <span>35%</span>
  </div>
  <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
    <span>20%</span>
  </div>
  <div class="progress-bar progress-bar-danger" style="width: 10%">
    <span>10%</span>
  </div>
</div>

デモページはこちら