プログレスバー

達成率や進捗度合いなど全体に対する割合のデータ視覚化や、読み込み状況を表すプログレスバーに利用できます。

<div class="progress">
  <div class="progress-bar" style="width: 50%;"></div>
</div>

システム機能色で着色や色分けも可能です。

<div class="progress">
  <div class="progress-bar progress-bar-success" style="width: 35%;"></div>
  <div class="progress-bar progress-bar-info" style="width: 25%;"></div>
  <div class="progress-bar progress-bar-warning" style="width: 15%;"></div>
  <div class="progress-bar progress-bar-danger" style="width: 5%;"></div>
</div>