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

바 로더

Bar Loader

트랙 안에서 짧은 블록이 좌우로 오가며, 진행률을 알 수 없는 대기를 알리는 로더.

다른 이름: Sliding bar loader
···
html
<div class="wrap" role="status" aria-live="polite" aria-busy="true">
  <div class="track" aria-hidden="true"><div class="block"></div></div>
  <span class="cap">translateX 왕복</span>
</div>
css
.wrap{display:flex;flex-direction:column;align-items:center;gap:16px;width:min(76%,260px)}
.track{position:relative;width:100%;height:clamp(7px,2vmin,10px);border-radius:999px;background:var(--line);overflow:hidden}
.block{position:absolute;top:0;bottom:0;width:34%;border-radius:999px;background:var(--accent);animation:bl 1.4s ease-in-out infinite}
@keyframes bl{0%{left:0}50%{left:66%}100%{left:0}}
.cap{font-size:clamp(9px,2.4vmin,11px);color:var(--muted);letter-spacing:.02em}

가로로 긴 자리(카드 하단, 페이지 상단)에서 "처리 중"만 전달하는 비확정적 표시입니다. 실제 진행률을 계산할 수 있게 되는 순간 이 로더는 목적을 잃습니다 — 같은 트랙 모양을 유지한 채 확정적인 progress-bar로 바꾸는 게 사용자에게 더 정직합니다.

트랙(전체 폭 회색 바) 안에 그보다 짧은 블록 하나를 두고, translateX를 0%에서 트랙 너비만큼 왕복시키는 keyframe에 ease-in-out을 줍니다. 아래에서 다룰 indeterminate-bar와 달리 막대가 하나뿐이고 늘어나지 않아 구현이 더 간단합니다.

200ms 이내로 끝날 로딩이면 아예 보여주지 않는 게 낫고, 화면 대부분을 오래 가리는 로딩이라면 스켈레톤이 체감 속도에 더 유리합니다. 트랙에 role="progressbar"는 진행률을 모를 때는 부적절하니 role="status"·aria-live="polite"로 감싸고, aria-busy="true"를 실제 로딩 컨테이너에 함께 둡니다. prefers-reduced-motion에서는 왕복 애니메이션 대신 트랙만 옅게 깜빡이는 정도로 줄일 수 있습니다.