Plinko Loader: Pure CSS Loading Animation

Plinko Loader

Balls drop into a triangle of pegs and hop left or right off each row before settling in a slot at the bottom, like a Galton board. Three balls, three paths, one 2.4s clock.

Also known as: galton board animation, pachinko loader, balls bouncing through pegs.

Color Size 64px Dark background

HTML

<div class="ldr-plinko" role="status" aria-label="Loading">
  <span class="ldr-plinko-pegs" style="--r: 0"></span>
  <span class="ldr-plinko-pegs" style="--r: 1"></span>
  <span class="ldr-plinko-pegs" style="--r: 2"></span>
  <span class="ldr-plinko-pegs" style="--r: 3"></span>
  <span class="ldr-plinko-ball"><span></span></span>
  <span class="ldr-plinko-ball"><span></span></span>
  <span class="ldr-plinko-ball"><span></span></span>
</div>

CSS

.ldr-plinko {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  width: calc(var(--s) * 1.2);
  height: calc(var(--s) * 1.1);
}
.ldr-plinko::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--s) / 24);
  border-radius: calc(var(--s) / 48);
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 35%, transparent);
}
/* Row r holds r + 1 pegs, 0.24 --s apart, centered. */
.ldr-plinko-pegs {
  position: absolute;
  top: calc(var(--s) * (0.25 + var(--r) * 0.2));
  left: calc(50% - (var(--r) + 1) * var(--s) * 0.12);
  width: calc((var(--r) + 1) * var(--s) * 0.24);
  height: calc(var(--s) * 0.1);
  background: radial-gradient(circle, color-mix(in srgb, var(--ldr-color, #3b82f6) 55%, transparent) 0 calc(var(--s) * 0.035), transparent calc(var(--s) * 0.035 + 0.5px)) 0 0 / calc(var(--s) * 0.24) 100% repeat-x;
}
.ldr-plinko-ball {
  position: absolute;
  top: 0;
  left: 50%;
  animation: ldr-plinko-path-a 2.4s linear infinite;
}
.ldr-plinko-ball > span {
  position: absolute;
  width: calc(var(--s) * 0.14);
  height: calc(var(--s) * 0.14);
  margin: calc(var(--s) * -0.07);
  border-radius: 50%;
  background: var(--c);
  animation: ldr-plinko-drop 2.4s infinite;
}
.ldr-plinko-ball:nth-child(6) { animation-name: ldr-plinko-path-b; }
.ldr-plinko-ball:nth-child(7) { animation-name: ldr-plinko-path-c; }
.ldr-plinko-ball:nth-child(6),
.ldr-plinko-ball:nth-child(6) > span { animation-delay: -0.8s; }
.ldr-plinko-ball:nth-child(7),
.ldr-plinko-ball:nth-child(7) > span { animation-delay: -1.6s; }
/* Each hop: a small rise off the peg (ease out), then a fall to the next row (ease in). */
@keyframes ldr-plinko-drop {
  0%   { transform: translateY(calc(var(--s) * 0.04)); opacity: 0; animation-timing-function: cubic-bezier(0.33, 0, 0.67, 0.33); }
  5%   { opacity: 1; }
  10%  { transform: translateY(calc(var(--s) * 0.195)); animation-timing-function: cubic-bezier(0.33, 0.67, 0.67, 1); }
  16%  { transform: translateY(calc(var(--s) * 0.15)); animation-timing-function: cubic-bezier(0.33, 0, 0.67, 0.33); }
  25%  { transform: translateY(calc(var(--s) * 0.395)); animation-timing-function: cubic-bezier(0.33, 0.67, 0.67, 1); }
  31%  { transform: translateY(calc(var(--s) * 0.35)); animation-timing-function: cubic-bezier(0.33, 0, 0.67, 0.33); }
  40%  { transform: translateY(calc(var(--s) * 0.595)); animation-timing-function: cubic-bezier(0.33, 0.67, 0.67, 1); }
  46%  { transform: translateY(calc(var(--s) * 0.55)); animation-timing-function: cubic-bezier(0.33, 0, 0.67, 0.33); }
  55%  { transform: translateY(calc(var(--s) * 0.795)); animation-timing-function: cubic-bezier(0.33, 0.67, 0.67, 1); }
  61%  { transform: translateY(calc(var(--s) * 0.75)); animation-timing-function: cubic-bezier(0.33, 0, 0.67, 0.33); }
  72%, 88% { transform: translateY(calc(var(--s) * 0.99)); opacity: 1; }
  96%, 100% { transform: translateY(calc(var(--s) * 0.99)); opacity: 0; }
}
@keyframes ldr-plinko-path-a {
  0%, 10%   { transform: translateX(0); }
  25%       { transform: translateX(calc(var(--s) * 0.12)); }
  40%       { transform: translateX(0); }
  55%       { transform: translateX(calc(var(--s) * 0.12)); }
  72%, 100% { transform: translateX(calc(var(--s) * 0.24)); }
}
@keyframes ldr-plinko-path-b {
  0%, 10%   { transform: translateX(0); }
  25%       { transform: translateX(calc(var(--s) * -0.12)); }
  40%       { transform: translateX(calc(var(--s) * -0.24)); }
  55%       { transform: translateX(calc(var(--s) * -0.12)); }
  72%, 100% { transform: translateX(calc(var(--s) * -0.24)); }
}
@keyframes ldr-plinko-path-c {
  0%, 10%   { transform: translateX(0); }
  25%       { transform: translateX(calc(var(--s) * 0.12)); }
  40%       { transform: translateX(calc(var(--s) * 0.24)); }
  55%       { transform: translateX(calc(var(--s) * 0.12)); }
  72%, 100% { transform: translateX(0); }
}

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

Plinko Loader

HTML

CSS

Customizing this loader

Similar loaders