Progress

Progress bars, spinners, dot loaders, and skeleton placeholders for loading states.

Progress Bars

HTML

<div class="ziom-progress"><div class="ziom-progress-bar" style="width: 60%"></div></div>
<div class="ziom-progress ziom-progress-success"><div class="ziom-progress-bar" style="width: 75%"></div></div>
<div class="ziom-progress ziom-progress-warning"><div class="ziom-progress-bar" style="width: 50%"></div></div>
<div class="ziom-progress ziom-progress-danger"><div class="ziom-progress-bar" style="width: 25%"></div></div>

Striped & Animated

HTML

<div class="ziom-progress ziom-progress-striped ziom-progress-animated">
  <div class="ziom-progress-bar" style="width: 60%"></div>
</div>

Spinners

HTML

<div class="ziom-spinner ziom-spinner-sm"></div>
<div class="ziom-spinner"></div>
<div class="ziom-spinner ziom-spinner-lg"></div>

Dots Loader

HTML

<div class="ziom-dots">
  <div class="ziom-dot"></div>
  <div class="ziom-dot"></div>
  <div class="ziom-dot"></div>
</div>

Skeleton Loaders

HTML

<div class="ziom-skeleton-card">
  <div class="ziom-skeleton-row">
    <div class="ziom-skeleton ziom-skeleton-avatar"></div>
    <div class="ziom-skeleton-stack">
      <div class="ziom-skeleton ziom-skeleton-title"></div>
      <div class="ziom-skeleton ziom-skeleton-text"></div>
    </div>
  </div>
</div>