Hourglass

모래시계

A shape that flips like a sand timer at a fixed interval — a metaphor for a slow, ongoing task.

Also known as: 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}

An indeterminate loader that leans on a shape's metaphor — "time is passing" — rather than abstract motion. The remaining time is just as unknown as with any other indeterminate loader, but because an hourglass is a familiar symbol, people unconsciously read it as "this will take a while," so using it for a task that actually finishes in a couple of seconds overstates the wait.

Two triangles meet via clip-path (or a border trick) to form the hourglass outline, with a small dot looping a fall from top to bottom in between; at a fixed interval the whole shape flips 180° in one instant step. Timing the flip to land right after the dot finishes falling keeps the "it flips once the sand runs out" logic intact.

It fits a genuinely long batch job or a processing queue well; for a loading state covering the whole screen, a skeleton still feels faster. Give the wrapper role="status" and aria-live="polite", and hide the shape with aria-hidden="true" since it's decorative. Under prefers-reduced-motion, freeze the flip and the falling dot and fall back to a static hourglass icon.