.mt-progress
という入れ子を用意して実装します。style
属性をインラインで記入して表現します。aria-valuenow
の値には、進行を示す 1
から 100
までの数値を入力してください。<div class="mt-progress">
<div class="progress">
<div class="progress-bar" role="progressbar" style="width:25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
アイドル状態のときはアニメーションを付けて進行が停止していることを示します。この場合、class名progress-bar-striped progress-bar-animated
をバーに追加します。
<div class="mt-progress">
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width:75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>