Design Atlas
한국어
◌ Loaders gallery

Morphing Loader

모핑 로더

A single shape smoothly morphing between a circle, a square, and a blob.

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

Where the other loaders move by position or brightness, this one keeps changing its shape, which reads as "something fluid is in progress." It fits a brand with a soft, organic tone — wellness apps, creative tools — and can feel distracting in an information-dense dashboard.

Each corner of border-radius gets a different value per keyframe (e.g. 60% 40% 30% 70% / 60% 30% 70% 40%), oscillating between a circle and a blob; adding a slow rotate on top makes it spin while it morphs, which reads as more organic still. The key is interpolating border-radius smoothly, with no sudden jumps between corners.

A skeleton fits better for a long wait covering the whole screen; skip it under 200ms. 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 morph and rotation and fall back to one static blob shape.