コンポーネント

ボタン、ドロップダウン、入力フォーム、ナビゲーション、アラートなどのコンポーネント。

現在翻訳中です。お待ちください。

プログレス

いくつかのクラスやブラウザ固有のCSSと共にHTML5の<progress>要素を適用します。必ずブラウザのサポート情報をお読みください。

コンテンツ

0% 25% 50% 75% 100%
<progress class="progress" value="0" max="100">0%</progress>
<progress class="progress" value="25" max="100">25%</progress>
<progress class="progress" value="50" max="100">50%</progress>
<progress class="progress" value="75" max="100">75%</progress>
<progress class="progress" value="100" max="100">100%</progress>

IE9 サポート

Internet Explorer 9 は HTML5 の <progress>要素をサポートしていませんが、以下のようにすれば対応できます。

25%
<progress class="progress" value="25" max="100">
<div class="progress">
<span class="progress-bar" style="width: 25%;">25%</span>
</div>
</progress>

スタイルの選択

プログレスバーでは、スタイルの一貫性を保つため、ボタンやアラートと同様のクラスを使用します。

25% 50% 75% 100%
<progress class="progress progress-success" value="25" max="100">25%</progress>
<progress class="progress progress-info" value="50" max="100">50%</progress>
<progress class="progress progress-warning" value="75" max="100">75%</progress>
<progress class="progress progress-danger" value="100" max="100">100%</progress>

ストライプ

ストライプ効果を作るためにグラデーションを使用します。

10% 25% 50% 75% 100%
<progress class="progress progress-striped" value="10" max="100">10%</progress>
<progress class="progress progress-striped progress-success" value="25" max="100">25%</progress>
<progress class="progress progress-striped progress-info" value="50" max="100">50%</progress>
<progress class="progress progress-striped progress-warning" value="75" max="100">75%</progress>
<progress class="progress progress-striped progress-danger" value="100" max="100">100%</progress>

アニメーション

ストライプにはアニメーションも適用できます。CSS3アニメーションを使用して右から左にストライプをアニメーションさせるために .progress.progress-animatedを追加します。

アニメーションプログレスバーは IE9以下 と Opera 12以下 では動作しません。CSS3 アニメーションをサポートしていないためです。

25%
<progress class="progress progress-striped progress-animated" value="25" max="100">25%</progress>