Components / Feedback & Status / Skeleton

Skeleton beta

Loading placeholders with the same geometry as the real content, so the page never jumps.

Preview

Uses: Avatar — include its CSS alongside this one.

<div style="display:grid;gap:12px;max-width:380px" aria-hidden="true">
  <div style="display:flex;gap:12px;align-items:center">
    <span class="k-sk k-sk-circle" style="width:40px;height:40px"></span>
    <div style="display:grid;gap:7px;flex:1"><span class="k-sk" style="height:12px;width:46%"></span><span class="k-sk" style="height:12px;width:72%"></span></div>
  </div>
  <span class="k-sk" style="height:12px"></span>
  <span class="k-sk" style="height:12px;width:84%"></span>
  <span class="k-sk" style="height:64px;border-radius:var(--k-radius-lg)"></span>
</div>

/* KATA Skeleton */
.k-sk{display:block;border-radius:var(--k-radius-sm);background:linear-gradient(90deg,var(--k-bg-soft) 25%,var(--k-line) 50%,var(--k-bg-soft) 75%);background-size:200% 100%;animation:k-shimmer 1.4s ease-in-out infinite}
.k-sk-circle{border-radius:50%}
@keyframes k-shimmer{0%{background-position:120% 0}100%{background-position:-80% 0}}
@media (prefers-reduced-motion: reduce){.k-sk{animation:none}}

Usage

Match the skeleton to the layout it replaces — same widths, same heights. If the wait passes a second, prefer a spinner with a label instead.

Accessibility

Skeletons are aria-hidden. Announce loading once on the container with role="status"; do not animate for users with prefers-reduced-motion.

Progress

Spinner