プログレスバーは、プロセスがどの程度進行したかを示すのに使用します：

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% Complete</span>
</div>
</div>

Try it Yourself »

注: Internet Explorer9 以前では、プログレスバーをサポートしていません（効果の一部を実現するために CSS3 のトランジションやアニメーションを使用しているためです）。

注: スクリーンリーダを使っている人のアクセシビリティを改善するには、 aria-* 属性をインクルードする必要があります。

ラベル付きプログレスバー

パーセンテージが見えるようにするには、プログレスバーから .sr-only クラスを削除します：

例

Try it Yourself »

色付きのプログレスバー

コンテキストクラスは、「色を介して意味」を表現するために使用します。

プログレスバーで使用できるコンテキストクラスは次のとおりです：

次の例は、いろいろなコンテキストクラスを持つプログレスバーの作成方法を示しています：

例

<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% Complete (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% Complete (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% Complete (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% Complete (danger)
</div>
</div>

Try it Yourself »

ストライプ付きのプログレスバー

プログレスバーにストライプを付けるには、クラス .progress-bar-striped を追加します：

例

<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% Complete (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% Complete (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% Complete (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% Complete (danger)
</div>
</div>

Try it Yourself »

アニメーション付きプログレスバー

ここに、「アニメーション付き」のプログレスバーがあります：

プログレスバーをアニメアニメ化するには、クラス .active を追加します：

例

Try it Yourself »

積上げ（Stacked）プログレスバー

同じ <div class="progress"> 内に複数のバーを配置することで、 stacked プログレスバーを作成します：

例

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

Try it Yourself »

Bootstrap プログレスバー

基本的なプログレスバー

例

ラベル付きプログレスバー

例

色付きのプログレスバー

例

ストライプ付きのプログレスバー

例

アニメーション付きプログレスバー

例

積上げ（Stacked）プログレスバー

例

練習問題で確認！