ブートストラップ4プログレスバー
基本的なプログレスバー
プログレスバーを使用して、ユーザーがプロセスの進行状況を示すことができます。
デフォルトのプログレスバーを作成する.progressには、コンテナ要素に.progress-barクラスを追加し、その子要素にクラスを追加します。CSSwidthプロパティを使用して、プログレスバーの幅を設定します。
例
<div class="progress">
<div class="progress-bar" style="width:70%"></div>
</div>
プログレスバーの高さ
プログレスバーの高さはデフォルトで16pxです。CSSheightプロパティを使用して変更します。プログレスコンテナとプログレスバーに同じ高さを設定する必要があることに注意してください。
例
<div class="progress" style="height:20px">
<div class="progress-bar" style="width:40%;height:20px"></div>
</div>
プログレスバーラベル
プログレスバー内にテキストを追加して、表示されているパーセンテージを表示します。
例
<div class="progress">
<div class="progress-bar" style="width:70%">70%</div>
</div>
色付きのプログレスバー
デフォルトでは、進行状況バーは青（プライマリ）です。Bootstrap 4コンテキスト背景クラスのいずれかを使用して、色を変更します。
例
<!-- Blue -->
<div class="progress">
<div class="progress-bar"
style="width:10%"></div>
</div>
<!-- Green -->
<div
class="progress">
<div
class="progress-bar bg-success" style="width:20%"></div>
</div>
<!--
Turquoise -->
<div class="progress">
<div class="progress-bar bg-info" style="width:30%"></div>
</div>
<!-- Orange -->
<div class="progress">
<div class="progress-bar bg-warning"
style="width:40%"></div>
</div>
<!-- Red -->
<div
class="progress">
<div class="progress-bar bg-danger"
style="width:50%"></div>
</div>
<!-- White -->
<div
class="progress border">
<div
class="progress-bar bg-white" style="width:60%"></div>
</div>
<!--
Grey -->
<div class="progress">
<div class="progress-bar bg-secondary"
style="width:70%"></div>
</div>
<!-- Light Grey -->
<div
class="progress border">
<div class="progress-bar bg-light"
style="width:80%"></div>
</div>
<!--
Dark Grey -->
<div class="progress">
<div class="progress-bar bg-dark" style="width:90%"></div>
</div>
ストライプのプログレスバー
クラスを使用し.progress-bar-stripedて、プログレスバーにストライプを追加します。
例
<div class="progress">
<div class="progress-bar
progress-bar-striped" style="width:40%"></div>
</div>
アニメーションプログレスバー
クラスを追加して.progress-bar-animated、プログレスバーをアニメーション化します。
例
<div class="progress-bar progress-bar-striped progress-bar-animated"
style="width:40%"></div>
複数のプログレスバー
プログレスバーも積み重ねることができます。
例
<div class="progress">
<div class="progress-bar bg-success"
style="width:40%">
Free Space
</div>
<div class="progress-bar bg-warning" style="width:10%">
Warning
</div>
<div class="progress-bar bg-danger"
style="width:20%">
Danger
</div>
</div>