비확정 진행바 — 디자인 아틀라스

<div class="wrap" role="status" aria-live="polite" aria-busy="true"> <div class="track" aria-hidden="true"><div class="ib ib1"></div><div class="ib ib2"></div></div> <span class="cap">두 막대 scaleX + translateX 오프셋</span> </div>

.wrap{display:flex;flex-direction:column;align-items:center;gap:16px;width:min(76%,260px)} .track{position:relative;width:100%;height:clamp(6px,1.8vmin,9px);border-radius:999px;background:var(--line);overflow:hidden} .ib{position:absolute;top:0;bottom:0;left:0;width:100%;border-radius:999px;transform-origin:left center} .ib1{background:var(--accent);animation:ib1 2.1s cubic-bezier(.65,.815,.735,.395) infinite} .ib2{background:var(--accent-2);animation:ib2 2.1s cubic-bezier(.165,.84,.44,1) infinite .9s} @keyframes ib1{0%{transform:translateX(-100%) scaleX(.1)}55%{transform:translateX(20%) scaleX(.85)}100%{transform:translateX(110%) scaleX(.1)}} @keyframes ib2{0%{transform:translateX(-140%) scaleX(.1)}55%{transform:translateX(10%) scaleX(.6)}100%{transform:translateX(110%) scaleX(.1)}} .cap{font-size:clamp(9px,2.4vmin,11px);color:var(--muted);letter-spacing:.02em}

페이지 전환·라우트 이동처럼 "얼마나 걸릴지 모르지만 뭔가 일어나고 있다"를 알리는 표준적인 비확정적 표시입니다. 업로드처럼 바이트 수를 셀 수 있는 작업이라면 같은 자리에 확정적 progress-bar를 쓰는 게 사용자에게 훨씬 유용합니다.

머티리얼 디자인 스펙에서 가져온 방식으로, 트랙 안에 막대 두 개를 절대 위치로 겹쳐두고 각각 transform: scaleX와 translateX를 다른 지속시간·다른 시작 지점으로 애니메이션합니다. 한 막대가 줄어들며 사라지기 전에 다음 막대가 나타나도록 타이밍을 겹쳐야 끊김이 없어 보입니다.

로딩이 200ms 이내로 끝날 것 같으면 생략하고, 화면 대부분을 가리는 긴 전환이면 스켈레톤을 함께 고려하세요. role="progressbar"는 진행률이 없을 때 오해를 주므로, 컨테이너에 role="status"·aria-live="polite"·aria-busy="true"를 줍니다. prefers-reduced-motion에서는 두 막대의 이동 대신 트랙 전체를 옅게 반짝이는 정도로 대체할 수 있습니다.