Morphing Dots Loader: Pure CSS Loading Animation

Morphing Dots Loader

Eight dots lying in a line curl up into a ring, spin half a turn, then straighten out again. Every dot reads its line and ring positions from custom properties in the markup.

Also known as: dots line to circle, shape shifting dots, dots morph animation.

Color Size 64px Dark background

HTML

<div class="ldr-morphing-dots" role="status" aria-label="Loading">
  <span style="--lx:-0.7;--cx:-0.145;--cy:-0.351"></span>
  <span style="--lx:-0.5;--cx:-0.351;--cy:-0.145"></span>
  <span style="--lx:-0.3;--cx:-0.351;--cy:0.145"></span>
  <span style="--lx:-0.1;--cx:-0.145;--cy:0.351"></span>
  <span style="--lx:0.1;--cx:0.145;--cy:0.351"></span>
  <span style="--lx:0.3;--cx:0.351;--cy:0.145"></span>
  <span style="--lx:0.5;--cx:0.351;--cy:-0.145"></span>
  <span style="--lx:0.7;--cx:0.145;--cy:-0.351"></span>
</div>

CSS

.ldr-morphing-dots {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  --d: calc(var(--s) / 7);
  position: relative;
  width: calc(var(--s) * 1.6);
  height: var(--s);
  animation: ldr-morphing-dots-turn 2.8s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
.ldr-morphing-dots span {
  position: absolute;
  top: calc(50% - var(--d) / 2);
  left: calc(50% - var(--d) / 2);
  width: var(--d);
  height: var(--d);
  border-radius: 50%;
  background: var(--c);
  animation: ldr-morphing-dots-shape 2.8s cubic-bezier(0.7, 0, 0.3, 1) infinite;
}
@keyframes ldr-morphing-dots-shape {
  0%, 15%, 85%, 100% { transform: translate(calc(var(--lx) * var(--s)), 0); }
  40%, 60%           { transform: translate(calc(var(--cx) * var(--s)), calc(var(--cy) * var(--s))); }
}
@keyframes ldr-morphing-dots-turn {
  0%, 30%   { transform: rotate(0deg); }
  80%, 100% { transform: rotate(180deg); }
}

@media (prefers-reduced-motion: reduce) {
  .ldr-morphing-dots, .ldr-morphing-dots *, .ldr-morphing-dots::before, .ldr-morphing-dots::after, .ldr-morphing-dots *::before, .ldr-morphing-dots *::after {
    animation-duration: 3s;
  }
}

Customizing this loader

Color: set --ldr-color on the element or a parent. Currently previewing #3b82f6.
Size: set --ldr-size. Every dimension in the snippet is derived from it. Currently previewing 64px.
Speed: change the duration on the animation shorthand. Delays on the children are relative, so they keep their rhythm.
Accessibility: the root carries role="status" and an aria-label so screen readers announce the wait. The reduced-motion rule at the end slows the animation for users who asked for less motion.

Morphing Dots Loader

HTML

CSS

Customizing this loader

Similar loaders