Sci-Fi HUD Spinner: Pure CSS Loading Animation

Sci-Fi HUD Spinner

Four layered rings turn at their own speeds: a segmented rim, a tick scale, two heavy arcs and a dashed core around a blinking dot. Reads as scanning or booting, and every layer is plain SVG dashes.

Also known as: futuristic loader, tech circle loading animation, hud loading ring.

Color Size 64px Dark background

HTML

<svg class="ldr-hud-rings" viewBox="0 0 48 48" role="status" aria-label="Loading">
  <circle class="ldr-hud-rings-rim" cx="24" cy="24" r="22" pathLength="100"></circle>
  <circle class="ldr-hud-rings-ticks" cx="24" cy="24" r="18.5" pathLength="100"></circle>
  <circle class="ldr-hud-rings-arcs" cx="24" cy="24" r="14" pathLength="100"></circle>
  <circle class="ldr-hud-rings-core" cx="24" cy="24" r="8.5" pathLength="100"></circle>
  <circle class="ldr-hud-rings-dot" cx="24" cy="24" r="2.5"></circle>
</svg>

CSS

.ldr-hud-rings {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  width: var(--s);
  height: var(--s);
}
.ldr-hud-rings circle {
  fill: none;
  stroke: var(--c);
  transform-origin: center;
}
.ldr-hud-rings-rim {
  stroke-width: 2;
  stroke-dasharray: 22 11.33;
  opacity: 0.75;
  animation: ldr-hud-rings-spin 4s linear infinite;
}
.ldr-hud-rings-ticks {
  stroke-width: 3;
  stroke-dasharray: 1 2.5;
  opacity: 0.55;
  animation: ldr-hud-rings-spin 8s linear infinite reverse;
}
.ldr-hud-rings-arcs {
  stroke-width: 3.5;
  stroke-dasharray: 20 30;
  animation: ldr-hud-rings-spin 1.4s cubic-bezier(0.6, 0.05, 0.4, 0.95) infinite;
}
.ldr-hud-rings-core {
  stroke-width: 2;
  stroke-dasharray: 9 3.5;
  opacity: 0.85;
  animation: ldr-hud-rings-spin 2.4s linear infinite reverse;
}
.ldr-hud-rings-dot {
  fill: var(--c);
  stroke: none;
  animation: ldr-hud-rings-blink 1.4s steps(2, jump-none) infinite;
}
@keyframes ldr-hud-rings-spin {
  to { transform: rotate(360deg); }
}
@keyframes ldr-hud-rings-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.25; }
}

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

Sci-Fi HUD Spinner

HTML

CSS

Customizing this loader

Similar loaders