Progress

Progress bars for loading and completion indicators.

Basic usage

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

Sizes

<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>

Semantic colors

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

Indeterminate

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