Progress Bars

Visual indicators showing completion status or loading progress.

Basic Progress Bars

<div class="ethio-progress">
    <div class="ethio-progress-bar" style="width: 25%"></div>
  </div>
  <div class="ethio-progress">
    <div class="ethio-progress-bar" style="width: 50%"></div>
  </div>
  <div class="ethio-progress">
    <div class="ethio-progress-bar" style="width: 75%"></div>
  </div>

Progress Variants

<div class="ethio-progress">
    <div class="ethio-progress-bar" style="width: 30%"></div>
  </div>
  <div class="ethio-progress">
    <div class="ethio-progress-bar secondary" style="width: 50%"></div>
  </div>
  <div class="ethio-progress">
    <div class="ethio-progress-bar success" style="width: 70%"></div>
  </div>
  <div class="ethio-progress">
    <div class="ethio-progress-bar warning" style="width: 90%"></div>
  </div>
  <div class="ethio-progress">
    <div class="ethio-progress-bar error" style="width: 100%"></div>
  </div>

Progress Sizes

<div class="ethio-progress ethio-progress-sm">
    <div class="ethio-progress-bar" style="width: 33%"></div>
  </div>
  <div class="ethio-progress">
    <div class="ethio-progress-bar" style="width: 66%"></div>
  </div>
  <div class="ethio-progress ethio-progress-lg">
    <div class="ethio-progress-bar" style="width: 100%"></div>
  </div>