Spinner

Recipe CSS

This is the exact CSS your kit ships for Spinner — token-driven, so it re-themes with every knob. Get it (and the rest) from the configurator's Use kit panel.

/* === Spinner === — uses --k-anim-spin token */
.spinner {
  width: calc(var(--k-in-h-default) / 2);
  height: calc(var(--k-in-h-default) / 2);
  border-radius: 50%;
  border: 2px solid var(--k-surface-2);
  border-top-color: var(--k-primary);
  animation: var(--k-anim-spin, k-spin 800ms linear infinite);
  display: inline-block;
  flex: none;
}
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2s; } }
/* Size tiers — default ≈ half the input height; sm for inline/button use, lg for
   page/section loaders. Border scales with the ring so it stays proportional. */
.spinner--sm { width: calc(var(--k-in-h-default) / 3); height: calc(var(--k-in-h-default) / 3); border-width: 1.5px; }
.spinner--lg { width: var(--k-in-h-default); height: var(--k-in-h-default); border-width: 3px; }