プログレスバー

ローディングや進捗表示用のプログレスバー。

基本的な使い方

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

サイズ

<div class="kit-progress -small">
  <div class="kit-progress-bar" style="width: 40%;"></div>
</div>
<div class="kit-progress">
  <div class="kit-progress-bar" style="width: 60%;"></div>
</div>
<div class="kit-progress -large">
  <div class="kit-progress-bar" style="width: 80%;"></div>
</div>

セマンティックカラー

<div class="kit-progress">
  <div class="kit-progress-bar -success" style="width: 100%;"></div>
</div>

不確定（インデターミネート）

<div class="kit-progress">
  <div class="kit-progress-bar -indeterminate"></div>
</div>