Skip to content
EN KO VI NE KM ID
Design business cards Character collection 16 designs · PNG / SVG / PDF

Spinner

For waits of a few seconds where there is nothing countable to show.

Feedback

Live preview

Source

<div class="dc-spin" role="status">
  <span class="dc-spin__ring" aria-hidden="true"></span>
  <span class="dc-spin__text">수강생 명단을 불러오는 중…</span>
</div>
.dc-spin { display: inline-flex; align-items: center; gap: var(--dc-3); font-family: var(--dc-font); }
.dc-spin__ring {
  flex: none; width: 22px; height: 22px;
  border: 3px solid color-mix(in srgb, var(--dc-brand) 22%, transparent);
  border-top-color: var(--dc-brand);
  border-radius: var(--dc-r-full);
  animation: dc-spin-turn 800ms linear infinite;
}
.dc-spin__ring--sm { width: 16px; height: 16px; border-width: 2px; }
.dc-spin__ring--lg { width: 34px; height: 34px; }
.dc-spin__ring--on {
  width: 16px; height: 16px; border-width: 2px;
  border-color: color-mix(in srgb, var(--dc-text-on) 40%, transparent);
  border-top-color: var(--dc-text-on);
}
.dc-spin__text { font-size: 14px; color: var(--dc-text); }
.dc-spin__sub { font-size: 12px; color: var(--dc-text-mute); }
.dc-spin__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--dc-2);
  min-height: 44px; padding: 0 var(--dc-5);
  border: 0; border-radius: var(--dc-r-sm);
  background: var(--dc-brand); color: var(--dc-text-on);
  font-size: 15px; font-weight: 600;
}
.dc-spin__btn[aria-disabled="true"] { opacity: .75; cursor: default; }
.dc-spin--page {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--dc-2); min-height: 190px; padding: var(--dc-6);
  border: 1px solid var(--dc-line); border-radius: var(--dc-r-md);
  background: var(--dc-surface); text-align: center;
}
@keyframes dc-spin-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .dc-spin__ring { animation-duration: 1800ms !important; }
}

How to use it

  • Always put words beside it — a turning ring says nothing on its own
  • Past about ten seconds, switch to a progress bar or a skeleton
  • Keep it inside the region that is changing, not over the whole screen

Watch out for

  • Without role=status nothing reaches a screen reader at all
  • For reduced motion, slow the spin instead of stopping it — a frozen ring reads as broken

Next