Light Trail Loader: Pure CSS Loading Animation

Light Trail Loader

A point of light traces a trefoil knot and leaves a fading streak behind it, like a long-exposure photo. Three dashes of different lengths share one head through offset animation delays.

Also known as: glowing path animation, trefoil knot loader, comet trail svg.

Color Size 64px Dark background

HTML

<svg class="ldr-light-trail" viewBox="0 0 100 100" role="status" aria-label="Loading">
  <defs>
    <path id="ldr-light-trail-knot" pathLength="100" d="M50.0 41.8 58.0 42.4 65.7 44.2 72.8 47.0 79.1 50.7 84.3 55.2 88.3 60.2 90.9 65.4 92.0 70.7 91.7 75.8 89.9 80.3 86.9 84.0 82.7 86.8 77.5 88.5 71.7 88.9 65.4 88.0 58.9 85.7 52.5 82.1 46.5 77.3 41.2 71.5 36.7 64.9 33.2 57.7 30.8 50.1 29.7 42.6 29.8 35.3 31.1 28.5 33.4 22.6 36.7 17.7 40.7 14.1 45.2 11.9 50.0 11.1 54.8 11.9 59.3 14.1 63.3 17.7 66.6 22.6 68.9 28.5 70.2 35.3 70.3 42.6 69.2 50.1 66.8 57.7 63.3 64.9 58.8 71.5 53.5 77.3 47.5 82.1 41.1 85.7 34.6 88.0 28.3 88.9 22.5 88.5 17.3 86.8 13.1 84.0 10.1 80.3 8.3 75.8 8.0 70.7 9.1 65.4 11.7 60.2 15.7 55.2 20.9 50.7 27.2 47.0 34.3 44.2 42.0 42.4Z" />
  </defs>
  <use class="ldr-light-trail-track" href="#ldr-light-trail-knot" />
  <use class="ldr-light-trail-tail" href="#ldr-light-trail-knot" />
  <use class="ldr-light-trail-tail" href="#ldr-light-trail-knot" />
  <use class="ldr-light-trail-tail" href="#ldr-light-trail-knot" />
</svg>

CSS

.ldr-light-trail {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  width: var(--s);
  height: var(--s);
  overflow: visible;
  filter: drop-shadow(0 0 calc(var(--s) / 20) var(--c));
}
.ldr-light-trail use {
  fill: none;
  stroke: var(--c);
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ldr-light-trail-track {
  stroke-width: 3;
  opacity: 0.14;
}
.ldr-light-trail-tail {
  animation: ldr-light-trail-run 2.4s linear infinite;
}
.ldr-light-trail-tail:nth-of-type(2) { stroke-dasharray: 34 66; stroke-width: 4; opacity: 0.3; animation-delay: -1.584s; }
.ldr-light-trail-tail:nth-of-type(3) { stroke-dasharray: 18 82; stroke-width: 5; opacity: 0.55; animation-delay: -1.968s; }
.ldr-light-trail-tail:nth-of-type(4) { stroke-dasharray: 6 94; stroke-width: 6.5; animation-delay: -2.256s; }
@keyframes ldr-light-trail-run {
  to { stroke-dashoffset: -100; }
}

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

Light Trail Loader

HTML

CSS

Customizing this loader

Similar loaders