Design Atlas
한국어
▣ UI components

Spinner

스피너

A continuously rotating indicator that says work is happening, with no promise of when it ends.

Also known as: LoaderActivity indicatorThrobber
···
html
<div class="spwrap" role="status" aria-live="polite"><div class="spin"></div><span class="splabel">불러오는 중<i>.</i><i>.</i><i>.</i></span></div>
css
.spwrap{display:grid;place-items:center;gap:12px}
.spin{width:38px;height:38px;border-radius:50%;border:3.5px solid var(--line);border-top-color:var(--accent);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.splabel{font-size:12px;color:var(--muted)}
.splabel i{font-style:normal;animation:blink 1.4s infinite}
.splabel i:nth-child(2){animation-delay:.2s}
.splabel i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,80%,100%{opacity:.2}40%{opacity:1}}

Put role="status" and aria-live="polite" on the wrapper, along with a visually-hidden-if-you-like text like "Loading…". The spin animation itself is decorative and doesn't need to be announced, but the fact that loading is happening does need to reach the text.

The line against a progress bar is the determinate/indeterminate distinction covered above. The difference from a skeleton is that a spinner covers part or all of the screen and only announces "loading," while a skeleton previews the shape of the coming content to prevent layout shift and feel faster.

A spinner that flashes on and off within 200ms reads as a glitch, so it's often better to skip showing one at all if the load is likely to finish that quickly.