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

모핑 로더

Morphing Loader

하나의 도형이 원, 사각형, 물방울 모양 사이를 부드럽게 오가며 변하는 비확정적 로더.

다른 이름: Blob loaderShape-shifting loader
···
html
<div class="wrap" role="status" aria-live="polite">
  <div class="mb" aria-hidden="true"></div>
  <span class="cap">border-radius 키프레임 모핑</span>
</div>
css
.wrap{display:flex;flex-direction:column;align-items:center;gap:18px}
.mb{width:clamp(34px,11vmin,60px);height:clamp(34px,11vmin,60px);background:linear-gradient(135deg,var(--accent),var(--accent-3));animation:morph 3.2s ease-in-out infinite}
@keyframes morph{
  0%,100%{border-radius:42% 58% 65% 35% / 45% 45% 55% 55%;transform:rotate(0deg)}
  33%{border-radius:65% 35% 40% 60% / 60% 40% 60% 40%;transform:rotate(120deg)}
  66%{border-radius:50%;transform:rotate(240deg)}
}
.cap{font-size:clamp(9px,2.4vmin,11px);color:var(--muted);letter-spacing:.02em}

다른 로더들이 위치나 밝기로 움직임을 만드는 반면, 이건 형태 자체가 계속 바뀌면서 "무언가 유동적으로 진행되고 있다"는 인상을 줍니다. 브랜드가 부드럽고 유기적인 톤을 강조하고 싶을 때(웰니스 앱, 크리에이티브 툴) 잘 어울리고, 정보 밀도가 높은 대시보드에는 산만할 수 있습니다.

border-radius의 네 모서리 값을 키프레임마다 다르게 줘서(예: 60% 40% 30% 70% / 60% 30% 70% 40%) 원과 물방울 사이를 오가게 하고, 여기에 느린 rotate를 더하면 회전하면서 모양도 바뀌어 훨씬 유기적으로 보입니다. 급격한 각 변화 없이 border-radius 값을 부드럽게 보간하는 게 핵심입니다.

화면 전체를 오래 가리는 로딩이면 스켈레톤이 더 적합하고, 200ms 이내로 끝날 대기면 생략하세요. role="status"·aria-live="polite"를 감싸는 요소에 주고 도형은 장식이므로 aria-hidden="true"로 숨깁니다. prefers-reduced-motion에서는 모핑과 회전을 멈추고 고정된 블롭 모양 하나로 대체할 수 있습니다.