プログレスバー

プログレスバー

<div class="progress">
    <div class="progress-bar progress-bar-success" style="width: 60%;">
        success
    </div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-info" style="width: 80%;">
        info
    </div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-warning" style="width: 30%;">
        warning
    </div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-danger" style="width: 70%;">
        danger
    </div>
</div>

.progress-srtipedクラスを追加すると、バーがストライプ模様になる。
ストライプ模様をアニメーションさせるにはactiveを指定する。

<div class="progress progress-striped">
    <div class="progress-bar" style="width: 60%;">
    </div>
</div>
<div class="progress progress-striped active">
    <div class="progress-bar" style="width: 60%;">
    </div>
</div>

バーを積み重ねるには下記のように指定でする。
/progress^barクラスを設定したdivタグを続けて記述することで、バーが積み重なる。

<div class="progress">
    <div class="progress-bar" style="width: 20%;">
    </div>
    <div class="progress-bar progress-bar-success" style="width: 20%;">
    </div>
    <div class="progress-bar progress-bar-info" style="width: 20%;">
    </div>
    <div class="progress-bar progress-bar-warning" style="width: 20%;">
    </div>
    <div class="progress-bar progress-bar-danger" style="width: 20%;">
    </div>
</div>