Components / Feedback & Status / Spinner

Spinner beta

One ring, one moving edge. Three sizes, tuned to sit inside buttons without shifting the label.

Preview

Uses: Button — include its CSS alongside this one.

<div style="display:flex;gap:20px;align-items:center;flex-wrap:wrap">
  <span class="k-spinner" data-size="sm" role="status" aria-label="Loading"></span>
  <span class="k-spinner" role="status" aria-label="Loading"></span>
  <span class="k-spinner" data-size="lg" role="status" aria-label="Loading"></span>
  <button class="btn btn-sec btn-md" disabled><span class="k-spinner" data-size="sm"></span> Saving…</button>
</div>

/* KATA Spinner */
.k-spinner{display:inline-block;width:18px;height:18px;border-radius:50%;border:2px solid var(--k-line);border-top-color:var(--k-ink);animation:k-spin .7s linear infinite;flex:none}
.k-spinner[data-size="sm"]{width:14px;height:14px;border-width:2px}
.k-spinner[data-size="lg"]{width:26px;height:26px;border-width:3px}
@keyframes k-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){.k-spinner{animation-duration:1.6s}}

Usage

For waits under a few seconds. Inside a button, keep the label visible so the action stays named. For longer waits, say what is happening in words.

Accessibility

Give it role="status" and an accessible label ("Loading"). Never the only signal — pair with text when the wait matters.

Skeleton

Toast