プログレスバーは、どれくらい長くプロセスの中にいるかを、ユーザーに知らせるために使うことができます：
デフォルトのプログレスバーを作成するには、<div> 要素へ .progress クラスを、
.meter をその子要素（<span>）に追加してください。
プロセスのどれくらいか（100％ 中の 70％）を示すために、<span> 要素に幅を設定したことに注意してください：
デフォルトで、プログレスバーは青です。別の色にしたい場合は、次のコンテキストクラスのいずれかを使用します：
.secondary、.success または .alert：
<div class="progress">
<span class="meter"
style="width:50%"></span>
</div>
<div class="progress
secondary">
<span class="meter"
style="width:50%"></span>
</div>
<div class="progress
success">
<span class="meter"
style="width:50%"></span>
</div>
<div class="progress
alert">
<span class="meter"
style="width:50%"></span>
</div>
結果：
.radius と .round クラスは、プログレスバーの角に丸みを追加します：
<div class="progress">
<span class="meter"
style="width:50%"></span>
</div>
<div class="progress radius">
<span
class="meter" style="width:50%"></span>
</div>
<div
class="progress rounded">
<span class="meter"
style="width:50%"></span>
</div>
結果：
Default:
Radius:
Rounded:
プログレスバーの幅は、.small-num または .large-num で変えます。
ただし、num は 1(8.33%) と 12(デフォルト (100%)) の間の数値です：
<div class="progress large-1">
<span class="meter"
style="width:50%"></span>
</div>
<div class="progress
large-6">
<span class="meter"
style="width:50%"></span>
</div>
<div class="progress
large-9">
<span class="meter"
style="width:50%"></span>
</div>
<div class="progress
large-11">
<span class="meter"
style="width:50%"></span>
</div>
<!--
Default width -->
<div class="progress
large-12">
<span class="meter"
style="width:50%"></span>
</div>
結果：
プログレスバーにラベルを追加するには、CSS を使用します。この例では、パーセンテージを表示するために、 <span> 要素を追加しています：
<style>
.percentage {
position: absolute;
top: 50%;
left:
50%;
color:
white;
transform: translate(-50%, -50%);
font-size: 12px;
}
</style>
<div class="progress">
<span class="meter"
style="position:relative;width:75%">
<span
class="percentage">75%</span>
</span>
</div>
<div
class="progress success">
<span class="meter"
style="position:relative;width:50%">
<span
class="percentage">50%</span>
</span>
</div>
<div
class="progress alert">
<span class="meter"
style="position:relative;width:25%">
<span
class="percentage">25%</span>
</span>
</div>
結果：