Neon Cube Loader
An isometric wireframe cube built from neon tube, with two bright pulses racing along its edges and through the inner corner. One SVG path drawn three times: dim tube, glow and hot core.
Also known as: neon wireframe cube, glowing cube outline, synthwave cube loader.
HTML
<svg class="ldr-neon-cube" viewBox="0 0 100 100" role="status" aria-label="Loading">
<defs>
<path id="ldr-neon-cube-edges" pathLength="100" d="M50 12 L83 31 L83 69 L50 88 L17 69 L17 31 Z M50 50 L17 31 M50 50 L83 31 M50 50 L50 88" />
</defs>
<use class="ldr-neon-cube-tube" href="#ldr-neon-cube-edges" />
<use class="ldr-neon-cube-lit" href="#ldr-neon-cube-edges" />
<use class="ldr-neon-cube-core" href="#ldr-neon-cube-edges" />
</svg>CSS
.ldr-neon-cube {
--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) / 24) var(--c)) drop-shadow(0 0 calc(var(--s) / 8) color-mix(in srgb, var(--ldr-color, #3b82f6) 45%, transparent));
}
.ldr-neon-cube use {
fill: none;
stroke: var(--c);
stroke-width: 6;
stroke-linecap: round;
stroke-linejoin: round;
}
.ldr-neon-cube-tube {
opacity: 0.2;
}
.ldr-neon-cube-lit,
.ldr-neon-cube .ldr-neon-cube-core {
stroke-dasharray: 16 34;
animation: ldr-neon-cube-race 1.6s linear infinite;
}
.ldr-neon-cube .ldr-neon-cube-core {
stroke: color-mix(in srgb, var(--c) 35%, #fff);
stroke-width: 2;
}
@keyframes ldr-neon-cube-race {
to { stroke-dashoffset: -50; }
}
@media (prefers-reduced-motion: reduce) {
.ldr-neon-cube, .ldr-neon-cube *, .ldr-neon-cube::before, .ldr-neon-cube::after, .ldr-neon-cube *::before, .ldr-neon-cube *::after {
animation-duration: 3s;
}
}Customizing this loader
- Color: set
--ldr-coloron the element or a parent. Currently previewing#3b82f6. - Size: set
--ldr-size. Every dimension in the snippet is derived from it. Currently previewing64px. - Speed: change the duration on the
animationshorthand. Delays on the children are relative, so they keep their rhythm. - Accessibility: the root carries
role="status"and anaria-labelso screen readers announce the wait. The reduced-motion rule at the end slows the animation for users who asked for less motion.