Snake Dots Loader: Pure CSS Loading Animation

Snake Dots Loader

A four-dot snake steps through a four by four grid of faint dots on a path that visits every cell, just like the old phone game. steps() timing keeps every move a clean jump.

Also known as: snake game loader, retro snake loading animation, dot matrix snake.

Color Size 64px Dark background

HTML

<div class="ldr-snake-dots" role="status" aria-label="Loading">
  <span style="--k:0"></span><span style="--k:1"></span><span style="--k:2"></span><span style="--k:3"></span>
</div>

CSS

.ldr-snake-dots {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  --u: calc(var(--s) / 4);
  position: relative;
  width: var(--s);
  height: var(--s);
  background: radial-gradient(circle closest-side, color-mix(in srgb, var(--ldr-color, #3b82f6) 22%, transparent) 66%, transparent 72%) 0 0 / 25% 25%;
}
.ldr-snake-dots span {
  position: absolute;
  top: calc(var(--u) * 0.16);
  left: calc(var(--u) * 0.16);
  width: calc(var(--u) * 0.68);
  height: calc(var(--u) * 0.68);
  border-radius: 50%;
  background: var(--c);
  opacity: calc(1 - var(--k) * 0.22);
  animation: ldr-snake-dots-move 2.24s steps(1, end) infinite;
  animation-delay: calc(var(--k) * 0.14s - 2.24s);
}
@keyframes ldr-snake-dots-move {
  0%, 100% { transform: translate(0, 0); }
  6.25%  { transform: translate(var(--u), 0); }
  12.5%  { transform: translate(calc(var(--u) * 2), 0); }
  18.75% { transform: translate(calc(var(--u) * 3), 0); }
  25%    { transform: translate(calc(var(--u) * 3), var(--u)); }
  31.25% { transform: translate(calc(var(--u) * 3), calc(var(--u) * 2)); }
  37.5%  { transform: translate(calc(var(--u) * 3), calc(var(--u) * 3)); }
  43.75% { transform: translate(calc(var(--u) * 2), calc(var(--u) * 3)); }
  50%    { transform: translate(var(--u), calc(var(--u) * 3)); }
  56.25% { transform: translate(0, calc(var(--u) * 3)); }
  62.5%  { transform: translate(0, calc(var(--u) * 2)); }
  68.75% { transform: translate(var(--u), calc(var(--u) * 2)); }
  75%    { transform: translate(calc(var(--u) * 2), calc(var(--u) * 2)); }
  81.25% { transform: translate(calc(var(--u) * 2), var(--u)); }
  87.5%  { transform: translate(var(--u), var(--u)); }
  93.75% { transform: translate(0, var(--u)); }
}

@media (prefers-reduced-motion: reduce) {
  .ldr-snake-dots, .ldr-snake-dots *, .ldr-snake-dots::before, .ldr-snake-dots::after, .ldr-snake-dots *::before, .ldr-snake-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.

Snake Dots Loader

HTML

CSS

Customizing this loader

Similar loaders