디자인 아틀라스
EN
◌ 로더·로딩 갤러리

점 세 개 로더

Three Dots

점 세 개가 순서대로 밝아졌다 사라지길 반복하는, 가장 흔한 비확정적 대기 표시.

다른 이름: 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}

얼마나 걸릴지 알 수 없는 짧은 대기(채팅 응답, 검색 자동완성, 버튼 제출 직후)에 가장 널리 쓰이는 표시입니다. 숫자나 퍼센트 같은 확정적 정보를 주지 않고 "지금 처리 중"이라는 사실만 전달하므로, 진행률을 계산할 수 있는 작업(파일 업로드, 다운로드)이라면 프로그레스 바로 바꾸는 편이 낫습니다.

각 점에 같은 keyframe을 주고 animation-delay만 0.2초씩 어긋나게 주는 것으로 만듭니다. 점 하나만 깜빡이면 "고장난 것"처럼 보이지만, 세 개가 순서대로 이어지면 리듬이 생겨 "진행되고 있다"는 인상을 줍니다.

전체 화면을 가리는 대기라면 이 점 세 개보다 스켈레톤이 체감 속도에 낫습니다. 애니메이션을 줄이길 원하는 사용자를 위해 실제 서비스에서는 prefers-reduced-motion에서 깜빡임 대신 정적인 "불러오는 중" 텍스트로 대체하는 것을 고려하세요. 감싸는 요소에 role="status"와 aria-live="polite"를 주고, 점 자체는 장식이므로 aria-hidden="true"로 숨깁니다.