Design Atlas
한국어
◌ Loaders gallery

Three Dots

점 세 개 로더

Three dots that light up one after another in a loop — the most common indeterminate loading cue.

Also known as: Ellipsis loaderDot loader
···
html
<div class="wrap" role="status" aria-live="polite">
  <div class="dots" aria-hidden="true"><span></span><span></span><span></span></div>
  <span class="cap">animation-delay 스태거</span>
</div>
css
.wrap{display:flex;flex-direction:column;align-items:center;gap:14px}
.dots{display:flex;gap:clamp(6px,2vmin,12px)}
.dots span{width:clamp(9px,3vmin,16px);height:clamp(9px,3vmin,16px);border-radius:50%;background:var(--accent);animation:td 1.2s ease-in-out infinite}
.dots span:nth-child(2){animation-delay:.2s}
.dots span:nth-child(3){animation-delay:.4s}
@keyframes td{0%,80%,100%{opacity:.25;transform:scale(.7)}40%{opacity:1;transform:scale(1)}}
.cap{font-size:clamp(9px,2.4vmin,11px);color:var(--muted);letter-spacing:.02em}

The most common indicator for short, unpredictable waits — a chat reply, search-as-you-type, right after a button submit. It only says "something is happening," with no number or percentage, so once a task can report real progress (a file upload or download), switch to a progress bar instead.

Built by giving each dot the same keyframe and offsetting animation-delay by 0.2s per dot. A single blinking dot reads as broken; three in sequence create a rhythm that reads as "still working."

For a wait that covers the whole screen, a skeleton usually feels faster than three dots. For people who've asked for less motion, consider swapping the blink for static "Loading…" text under prefers-reduced-motion in production. Give the wrapper role="status" and aria-live="polite", and hide the dots themselves with aria-hidden="true" since they're purely decorative.