Kairoz
.kairoz-skeleton

Skeleton

Animated placeholder that mirrors the shape of incoming content. Size it inline; the shimmer handles the rest.

.kairoz-skeleton

Default

<div style="display:flex;flex-direction:column;gap:8px;width:360px">
  <div class="kairoz-skeleton" style="height:12px;width:40%"></div>
  <div class="kairoz-skeleton" style="height:12px;width:80%"></div>
  <div class="kairoz-skeleton" style="height:12px;width:65%"></div>
  <div class="kairoz-skeleton" style="height:12px;width:90%"></div>
</div>

Card loading state

<div class="kairoz-card" style="width:280px">
  <div class="kairoz-card-header"><div class="kairoz-skeleton" style="height:10px;width:80px"></div></div>
  <div class="kairoz-card-body">
    <div class="kairoz-skeleton" style="height:24px;width:60%;margin-bottom:8px"></div>
    <div class="kairoz-skeleton" style="height:10px;width:40%"></div>
  </div>
</div>