Juggling Balls Loader

<div class="ldr-juggling-balls" role="status" aria-label="Loading">
  <span><span></span></span><span><span></span></span><span><span></span></span>
</div>

.ldr-juggling-balls {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  width: calc(var(--s) * 1.3);
  height: calc(var(--s) * 1.1);
}
.ldr-juggling-balls::before,
.ldr-juggling-balls::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: calc(50% - var(--s) * 0.49);
  width: calc(var(--s) * 0.34);
  height: calc(var(--s) * 0.1);
  box-sizing: border-box;
  border-bottom: calc(var(--s) / 20) solid color-mix(in srgb, var(--ldr-color, #3b82f6) 40%, transparent);
  border-radius: 0 0 50% 50%;
}
.ldr-juggling-balls::after { left: calc(50% + var(--s) * 0.15); }
.ldr-juggling-balls > span {
  position: absolute;
  bottom: calc(var(--s) * 0.19);
  left: 50%;
  animation: ldr-juggling-balls-x 1.5s linear infinite;
}
.ldr-juggling-balls > span > span {
  position: absolute;
  width: calc(var(--s) * 0.18);
  height: calc(var(--s) * 0.18);
  margin: calc(var(--s) * -0.09);
  border-radius: 50%;
  background: var(--c);
  animation: ldr-juggling-balls-y 1.5s infinite;
}
.ldr-juggling-balls > span:nth-child(2),
.ldr-juggling-balls > span:nth-child(2) > span { animation-delay: -0.5s; }
.ldr-juggling-balls > span:nth-child(3),
.ldr-juggling-balls > span:nth-child(3) > span { animation-delay: -1s; }
/* Flights are linear in x; the hand carries the ball back inward. */
@keyframes ldr-juggling-balls-x {
  0%, 100% { transform: translateX(calc(var(--s) * 0.14)); }
  38%      { transform: translateX(calc(var(--s) * -0.5)); }
  50%      { transform: translateX(calc(var(--s) * -0.14)); }
  88%      { transform: translateX(calc(var(--s) * 0.5)); }
}
/* Exact parabolas: quadratic ease out on the way up, quadratic ease in on the way down. */
@keyframes ldr-juggling-balls-y {
  0%   { transform: translateY(0); animation-timing-function: cubic-bezier(0.33, 0.67, 0.67, 1); }
  19%  { transform: translateY(calc(var(--s) * -0.72)); animation-timing-function: cubic-bezier(0.33, 0, 0.67, 0.33); }
  38%  { transform: translateY(0); animation-timing-function: ease-out; }
  44%  { transform: translateY(calc(var(--s) * 0.06)); animation-timing-function: ease-in; }
  50%  { transform: translateY(0); animation-timing-function: cubic-bezier(0.33, 0.67, 0.67, 1); }
  69%  { transform: translateY(calc(var(--s) * -0.72)); animation-timing-function: cubic-bezier(0.33, 0, 0.67, 0.33); }
  88%  { transform: translateY(0); animation-timing-function: ease-out; }
  94%  { transform: translateY(calc(var(--s) * 0.06)); animation-timing-function: ease-in; }
  100% { transform: translateY(0); }
}

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

Similar loaders