Comet Orbit Loader: Pure CSS Loading Animation

Comet Orbit Loader

A comet loops a long ellipse around a small sun, crawling at the far end and whipping past the near one as Kepler's law says. The trailing dots stretch into a tail at speed.

Also known as: elliptical orbit loader, kepler orbit animation, comet loader.

Color Size 64px Dark background

HTML

<div class="ldr-comet-orbit" role="status" aria-label="Loading">
  <span class="ldr-comet-orbit-sun"></span>
  <span class="ldr-comet-orbit-comet" style="--i: 0"></span>
  <span class="ldr-comet-orbit-comet" style="--i: 1"></span>
  <span class="ldr-comet-orbit-comet" style="--i: 2"></span>
  <span class="ldr-comet-orbit-comet" style="--i: 3"></span>
  <span class="ldr-comet-orbit-comet" style="--i: 4"></span>
</div>

CSS

.ldr-comet-orbit {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  width: calc(var(--s) * 1.4);
  height: var(--s);
}
.ldr-comet-orbit::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--s) * 1.24);
  height: calc(var(--s) * 0.91);
  margin: calc(var(--s) * -0.455) 0 0 calc(var(--s) * -0.62);
  box-sizing: border-box;
  border: 1px solid color-mix(in srgb, var(--ldr-color, #3b82f6) 28%, transparent);
  border-radius: 50%;
}
.ldr-comet-orbit-sun {
  position: absolute;
  top: 50%;
  left: calc(50% + var(--s) * 0.42);
  width: calc(var(--s) / 5);
  height: calc(var(--s) / 5);
  margin: calc(var(--s) / -10);
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 calc(var(--s) / 6) color-mix(in srgb, var(--ldr-color, #3b82f6) 55%, transparent);
}
.ldr-comet-orbit-comet {
  --d: calc(var(--s) * (0.13 - var(--i) * 0.02));
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--d);
  height: var(--d);
  margin: calc(var(--d) / -2);
  border-radius: 50%;
  background: var(--c);
  opacity: calc(1 - var(--i) * 0.18);
  animation: ldr-comet-orbit-path 2.4s linear infinite;
  animation-delay: calc(var(--i) * 0.035s - 0.5s);
}
@keyframes ldr-comet-orbit-path {
  0% { transform: translate(calc(var(--s) * -0.620), calc(var(--s) * 0.000)); }
  6.97% { transform: translate(calc(var(--s) * -0.599), calc(var(--s) * -0.118)); }
  13.74% { transform: translate(calc(var(--s) * -0.537), calc(var(--s) * -0.227)); }
  20.15% { transform: translate(calc(var(--s) * -0.438), calc(var(--s) * -0.321)); }
  26.04% { transform: translate(calc(var(--s) * -0.310), calc(var(--s) * -0.394)); }
  31.29% { transform: translate(calc(var(--s) * -0.160), calc(var(--s) * -0.439)); }
  35.82% { transform: translate(calc(var(--s) * -0.000), calc(var(--s) * -0.455)); }
  39.62% { transform: translate(calc(var(--s) * 0.160), calc(var(--s) * -0.439)); }
  42.71% { transform: translate(calc(var(--s) * 0.310), calc(var(--s) * -0.394)); }
  45.15% { transform: translate(calc(var(--s) * 0.438), calc(var(--s) * -0.321)); }
  47.08% { transform: translate(calc(var(--s) * 0.537), calc(var(--s) * -0.227)); }
  48.63% { transform: translate(calc(var(--s) * 0.599), calc(var(--s) * -0.118)); }
  50% { transform: translate(calc(var(--s) * 0.620), calc(var(--s) * -0.000)); }
  51.37% { transform: translate(calc(var(--s) * 0.599), calc(var(--s) * 0.118)); }
  52.92% { transform: translate(calc(var(--s) * 0.537), calc(var(--s) * 0.227)); }
  54.85% { transform: translate(calc(var(--s) * 0.438), calc(var(--s) * 0.321)); }
  57.29% { transform: translate(calc(var(--s) * 0.310), calc(var(--s) * 0.394)); }
  60.38% { transform: translate(calc(var(--s) * 0.160), calc(var(--s) * 0.439)); }
  64.18% { transform: translate(calc(var(--s) * 0.000), calc(var(--s) * 0.455)); }
  68.71% { transform: translate(calc(var(--s) * -0.160), calc(var(--s) * 0.439)); }
  73.96% { transform: translate(calc(var(--s) * -0.310), calc(var(--s) * 0.394)); }
  79.85% { transform: translate(calc(var(--s) * -0.438), calc(var(--s) * 0.321)); }
  86.26% { transform: translate(calc(var(--s) * -0.537), calc(var(--s) * 0.227)); }
  93.03% { transform: translate(calc(var(--s) * -0.599), calc(var(--s) * 0.118)); }
  100% { transform: translate(calc(var(--s) * -0.620), calc(var(--s) * 0.000)); }
}

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

Comet Orbit Loader

HTML

CSS

Customizing this loader

Similar loaders