Bouncing Dot Progress Bar: Pure CSS Loading Animation

Bouncing Dot Progress Bar

An indeterminate pill track with a dot that rallies from wall to wall, stretching as it speeds through the middle and squashing flat against each end, with a faint echo trailing behind.

Also known as: ping pong loader, back and forth loading bar, knight rider loader.

Color Size 64px Dark background

HTML

<div class="ldr-bouncing-dot-progress-bar" role="progressbar" aria-label="Loading"><span></span></div>

CSS

.ldr-bouncing-dot-progress-bar {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  --d: calc(var(--s) * 0.3);
  --p: calc(var(--s) * 0.07);
  --run: calc(var(--s) * 4.5 - var(--d) - var(--p) * 2);
  position: relative;
  width: calc(var(--s) * 4.5);
  height: calc(var(--d) + var(--p) * 2);
  border-radius: var(--s);
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 12%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ldr-color, #3b82f6) 22%, transparent);
}
.ldr-bouncing-dot-progress-bar::before,
.ldr-bouncing-dot-progress-bar span {
  position: absolute;
  top: var(--p);
  left: var(--p);
  width: var(--d);
  height: var(--d);
  border-radius: 50%;
  background: var(--c);
  animation: ldr-bouncing-dot-progress-bar-rally 1.4s infinite;
}
.ldr-bouncing-dot-progress-bar::before {
  content: "";
  opacity: 0.3;
  animation-delay: -1.365s;
}
@keyframes ldr-bouncing-dot-progress-bar-rally {
  0%   { transform: translateX(calc(var(--d) * -0.12)) scale(0.72, 1.2); animation-timing-function: cubic-bezier(0.2, 0.6, 0.4, 1); }
  6%   { transform: translateX(calc(var(--d) * 0.2)) scale(1); animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1); }
  25%  { transform: translateX(calc(var(--run) / 2)) scale(1.7, 0.78); animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1); }
  44%  { transform: translateX(calc(var(--run) - var(--d) * 0.2)) scale(1); animation-timing-function: cubic-bezier(0.6, 0, 0.8, 0.4); }
  50%  { transform: translateX(calc(var(--run) + var(--d) * 0.12)) scale(0.72, 1.2); animation-timing-function: cubic-bezier(0.2, 0.6, 0.4, 1); }
  56%  { transform: translateX(calc(var(--run) - var(--d) * 0.2)) scale(1); animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1); }
  75%  { transform: translateX(calc(var(--run) / 2)) scale(1.7, 0.78); animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1); }
  94%  { transform: translateX(calc(var(--d) * 0.2)) scale(1); animation-timing-function: cubic-bezier(0.6, 0, 0.8, 0.4); }
  100% { transform: translateX(calc(var(--d) * -0.12)) scale(0.72, 1.2); }
}

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

Bouncing Dot Progress Bar

HTML

CSS

Customizing this loader

Similar loaders