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

모래시계

Hourglass

모래시계처럼 일정 시간마다 뒤집히며, 오래 걸리는 작업의 리듬을 은유하는 로더.

다른 이름: Sand timer loader
···
html
<div class="wrap" role="status" aria-live="polite">
  <div class="hg" aria-hidden="true"><div class="hg-shape"><i class="tri top"></i><i class="tri bot"></i><i class="sand"></i></div></div>
  <span class="cap">clip-path 삼각형 + 주기적 180deg 회전</span>
</div>
css
.wrap{display:flex;flex-direction:column;align-items:center;gap:18px}
.hg{width:clamp(30px,10vmin,54px);height:clamp(44px,14vmin,78px);display:grid;place-items:center}
.hg-shape{position:relative;width:100%;height:100%;animation:hgflip 3.6s steps(1,end) infinite}
.tri{position:absolute;left:0;width:100%;height:46%;background:var(--accent);opacity:.85}
.top{top:0;clip-path:polygon(0 0,100% 0,50% 100%)}
.bot{bottom:0;clip-path:polygon(50% 0,0 100%,100% 100%)}
.sand{position:absolute;left:50%;top:8%;width:9%;aspect-ratio:1;border-radius:50%;background:var(--accent-2);transform:translateX(-50%);animation:sandfall 1.8s ease-in infinite}
@keyframes hgflip{0%,45%{transform:rotate(0deg)}55%,100%{transform:rotate(180deg)}}
@keyframes sandfall{0%{top:8%;opacity:1}90%{top:88%;opacity:1}100%{top:88%;opacity:0}}
.cap{font-size:clamp(9px,2.4vmin,11px);color:var(--muted);letter-spacing:.02em}

"시간이 흐르고 있다"는 것을 형태 자체의 은유로 전달하는 비확정적 로더입니다. 실제 남은 시간을 알 수 없다는 점은 다른 비확정적 로더와 같지만, 모래시계라는 상징 때문에 사용자는 무의식적으로 "꽤 오래 걸리는 작업"이라고 받아들이므로 실제로 몇 초 안에 끝나는 작업에 쓰면 과장된 인상을 줍니다.

두 개의 삼각형을 clip-path(또는 border 트릭)로 맞대어 모래시계 윤곽을 만들고, 그 사이에 작은 점 하나를 위에서 아래로 떨어뜨리는 애니메이션을 반복하다가, 일정 주기마다 전체를 180도 회전(steps로 순간 전환)시켜 위아래를 뒤집습니다. 회전과 낙하 애니메이션의 주기를 맞춰야 "다 떨어진 다음에 뒤집힌다"는 인과관계가 자연스럽습니다.

정말 오래 걸리는 배치 작업이나 처리 대기열에는 잘 맞지만, 화면 전체를 가리는 로딩이면 스켈레톤이 체감 속도에는 더 유리합니다. role="status"·aria-live="polite"를 감싸는 요소에 주고 도형은 장식이므로 aria-hidden="true"로 숨깁니다. prefers-reduced-motion에서는 180도 회전과 낙하 애니메이션을 멈추고 정적인 모래시계 아이콘으로 대체하는 걸 권합니다.