Gravity Well Loader: Pure CSS Loading Animation

Gravity Well Loader

A ball spirals down a funnel drawn in perspective, speeding up as the orbit tightens, then drops through the hole. The funnel's depth follows 1/r, like a gravity well diagram.

Also known as: coin funnel animation, spiral wishing well, spacetime funnel loader.

Color Size 64px Dark background

HTML

<div class="ldr-gravity-well" role="status" aria-label="Loading">
  <span class="ldr-gravity-well-ring" style="--r: 0.5"></span>
  <span class="ldr-gravity-well-ring" style="--r: 0.34"></span>
  <span class="ldr-gravity-well-ring" style="--r: 0.23"></span>
  <span class="ldr-gravity-well-ring" style="--r: 0.155"></span>
  <span class="ldr-gravity-well-ring" style="--r: 0.1"></span>
  <span class="ldr-gravity-well-ball"></span>
  <span class="ldr-gravity-well-ball"></span>
</div>

CSS

.ldr-gravity-well {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  width: calc(var(--s) * 1.05);
  height: calc(var(--s) * 0.72);
}
/* Rim to throat: each ring sits 0.055 / r lower, the 1/r shape of a gravity well. */
.ldr-gravity-well-ring {
  position: absolute;
  top: calc(50% + var(--s) * (0.055 / var(--r) - 0.266));
  left: 50%;
  width: calc(var(--s) * var(--r) * 2);
  height: calc(var(--s) * var(--r) * 0.64);
  margin: calc(var(--s) * var(--r) * -0.32) 0 0 calc(var(--s) * var(--r) * -1);
  box-sizing: border-box;
  border: 1px solid color-mix(in srgb, var(--ldr-color, #3b82f6) 40%, transparent);
  border-radius: 50%;
}
.ldr-gravity-well-ring:nth-child(5) {
  border: 0;
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 35%, transparent);
}
.ldr-gravity-well-ball {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--s) / 8);
  height: calc(var(--s) / 8);
  margin: calc(var(--s) / -16);
  border-radius: 50%;
  background: var(--c);
  opacity: 0;
  animation: ldr-gravity-well-spiral 3s linear infinite;
}
.ldr-gravity-well-ball:last-child { animation-delay: -1.5s; }
@keyframes ldr-gravity-well-spiral {
  0% { transform: translate(calc(var(--s) * 0.460), calc(var(--s) * -0.146)) scale(1.00); opacity: 0; }
  6% { transform: translate(calc(var(--s) * 0.460), calc(var(--s) * -0.146)) scale(1.00); opacity: 1; }
  10.37% { transform: translate(calc(var(--s) * 0.409), calc(var(--s) * -0.088)) scale(1.00); opacity: 1; }
  14.54% { transform: translate(calc(var(--s) * 0.301), calc(var(--s) * -0.041)) scale(0.99); opacity: 1; }
  18.53% { transform: translate(calc(var(--s) * 0.157), calc(var(--s) * -0.011)) scale(0.99); opacity: 1; }
  22.34% { transform: translate(calc(var(--s) * 0.000), calc(var(--s) * -0.000)) scale(0.98); opacity: 1; }
  25.98% { transform: translate(calc(var(--s) * -0.145), calc(var(--s) * -0.009)) scale(0.98); opacity: 1; }
  29.45% { transform: translate(calc(var(--s) * -0.259), calc(var(--s) * -0.033)) scale(0.98); opacity: 1; }
  32.77% { transform: translate(calc(var(--s) * -0.325), calc(var(--s) * -0.067)) scale(0.97); opacity: 1; }
  35.94% { transform: translate(calc(var(--s) * -0.339), calc(var(--s) * -0.104)) scale(0.97); opacity: 1; }
  38.97% { transform: translate(calc(var(--s) * -0.301), calc(var(--s) * -0.137)) scale(0.96); opacity: 1; }
  41.87% { transform: translate(calc(var(--s) * -0.222), calc(var(--s) * -0.162)) scale(0.96); opacity: 1; }
  44.63% { transform: translate(calc(var(--s) * -0.116), calc(var(--s) * -0.173)) scale(0.95); opacity: 1; }
  47.27% { transform: translate(calc(var(--s) * -0.000), calc(var(--s) * -0.170)) scale(0.94); opacity: 1; }
  49.8% { transform: translate(calc(var(--s) * 0.107), calc(var(--s) * -0.152)) scale(0.94); opacity: 1; }
  52.21% { transform: translate(calc(var(--s) * 0.191), calc(var(--s) * -0.123)) scale(0.93); opacity: 1; }
  54.51% { transform: translate(calc(var(--s) * 0.240), calc(var(--s) * -0.086)) scale(0.93); opacity: 1; }
  56.71% { transform: translate(calc(var(--s) * 0.250), calc(var(--s) * -0.046)) scale(0.92); opacity: 1; }
  58.81% { transform: translate(calc(var(--s) * 0.222), calc(var(--s) * -0.008)) scale(0.91); opacity: 1; }
  60.81% { transform: translate(calc(var(--s) * 0.164), calc(var(--s) * 0.024)) scale(0.91); opacity: 1; }
  62.73% { transform: translate(calc(var(--s) * 0.085), calc(var(--s) * 0.047)) scale(0.90); opacity: 1; }
  64.56% { transform: translate(calc(var(--s) * 0.000), calc(var(--s) * 0.059)) scale(0.89); opacity: 1; }
  66.31% { transform: translate(calc(var(--s) * -0.079), calc(var(--s) * 0.061)) scale(0.88); opacity: 1; }
  67.98% { transform: translate(calc(var(--s) * -0.141), calc(var(--s) * 0.056)) scale(0.87); opacity: 1; }
  69.58% { transform: translate(calc(var(--s) * -0.177), calc(var(--s) * 0.045)) scale(0.87); opacity: 1; }
  71.1% { transform: translate(calc(var(--s) * -0.184), calc(var(--s) * 0.033)) scale(0.86); opacity: 1; }
  72.56% { transform: translate(calc(var(--s) * -0.164), calc(var(--s) * 0.023)) scale(0.85); opacity: 1; }
  73.95% { transform: translate(calc(var(--s) * -0.121), calc(var(--s) * 0.018)) scale(0.84); opacity: 1; }
  75.28% { transform: translate(calc(var(--s) * -0.063), calc(var(--s) * 0.020)) scale(0.83); opacity: 1; }
  76.55% { transform: translate(calc(var(--s) * -0.000), calc(var(--s) * 0.031)) scale(0.82); opacity: 1; }
  77.76% { transform: translate(calc(var(--s) * 0.058), calc(var(--s) * 0.051)) scale(0.81); opacity: 1; }
  78.92% { transform: translate(calc(var(--s) * 0.104), calc(var(--s) * 0.076)) scale(0.80); opacity: 1; }
  80.02% { transform: translate(calc(var(--s) * 0.130), calc(var(--s) * 0.107)) scale(0.78); opacity: 1; }
  81.08% { transform: translate(calc(var(--s) * 0.136), calc(var(--s) * 0.139)) scale(0.77); opacity: 1; }
  82.09% { transform: translate(calc(var(--s) * 0.121), calc(var(--s) * 0.171)) scale(0.76); opacity: 1; }
  83.05% { transform: translate(calc(var(--s) * 0.089), calc(var(--s) * 0.200)) scale(0.75); opacity: 1; }
  83.98% { transform: translate(calc(var(--s) * 0.046), calc(var(--s) * 0.224)) scale(0.73); opacity: 1; }
  84.86% { transform: translate(calc(var(--s) * 0.000), calc(var(--s) * 0.243)) scale(0.72); opacity: 1; }
  85.7% { transform: translate(calc(var(--s) * -0.043), calc(var(--s) * 0.258)) scale(0.70); opacity: 1; }
  86.5% { transform: translate(calc(var(--s) * -0.076), calc(var(--s) * 0.268)) scale(0.69); opacity: 1; }
  87.27% { transform: translate(calc(var(--s) * -0.096), calc(var(--s) * 0.276)) scale(0.67); opacity: 1; }
  88% { transform: translate(calc(var(--s) * -0.100), calc(var(--s) * 0.284)) scale(0.66); opacity: 1; }
  94%, 100% { transform: translate(0, calc(var(--s) * 0.3)) scale(0.2); opacity: 0; }
}

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

Gravity Well Loader

HTML

CSS

Customizing this loader

Similar loaders