Design Atlas
한국어
◌ Loaders gallery

Bouncing Dots

통통 튀는 점

Dots that jump upward one after another — a more playful, rhythmic take on the waiting cue.

Also known as: Jumping dots
···
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">translateY 바운스 + 스태거</span>
</div>
css
.wrap{display:flex;flex-direction:column;align-items:center;gap:18px}
.dots{display:flex;gap:clamp(7px,2.4vmin,14px);height:clamp(20px,6vmin,34px);align-items:flex-end}
.dots span{width:clamp(9px,3vmin,16px);height:clamp(9px,3vmin,16px);border-radius:50%;background:var(--accent-2);animation:bd .9s cubic-bezier(.5,0,.5,1.6) infinite}
.dots span:nth-child(2){animation-delay:.15s;background:var(--accent)}
.dots span:nth-child(3){animation-delay:.3s;background:var(--accent-3)}
@keyframes bd{0%,100%{transform:translateY(0)}40%{transform:translateY(-90%)}}
.cap{font-size:clamp(9px,2.4vmin,11px);color:var(--muted);letter-spacing:.02em}

Same job as three dots — a short, indeterminate wait — but position moves instead of brightness, which reads as livelier and more attention-grabbing. It suits playful products like games or messengers; it can feel out of place in a serious dashboard or checkout flow.

Built with a keyframe that oscillates translateY between 0 and a negative value, using ease-in-out (or a bouncier custom cubic-bezier), with animation-delay offset per dot. Because the dots move vertically, leave at least 1.5× the dot height of clearance above and below or they'll clip.

If the task can report real progress, switch to a progress bar or a determinate ring like progress-ring instead. Give the wrapper role="status" and aria-live="polite", hide the dots with aria-hidden="true", and for motion-sensitive users consider reducing the amplitude or falling back to static text under prefers-reduced-motion.