Neon Sign Flicker Loader
A neon tube circle that buzzes on with a few sharp flickers, hums at full brightness, then cuts out. The unlit glass stays faintly visible, like a real sign with the power off.
Also known as: neon flicker loader, neon light animation, flickering neon circle.
HTML
<svg class="ldr-neon-sign" viewBox="0 0 100 100" role="status" aria-label="Loading">
<circle class="ldr-neon-sign-tube" cx="50" cy="50" r="38" pathLength="100" />
<g class="ldr-neon-sign-lit">
<circle cx="50" cy="50" r="38" pathLength="100" />
<circle class="ldr-neon-sign-core" cx="50" cy="50" r="38" pathLength="100" />
</g>
</svg>CSS
.ldr-neon-sign {
--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)) drop-shadow(0 0 calc(var(--s) / 6) color-mix(in srgb, var(--ldr-color, #3b82f6) 55%, transparent));
}
.ldr-neon-sign circle {
fill: none;
stroke: var(--c);
stroke-width: 9;
stroke-linecap: round;
stroke-dasharray: 86 14;
stroke-dashoffset: 68;
}
.ldr-neon-sign-tube {
opacity: 0.2;
}
.ldr-neon-sign .ldr-neon-sign-core {
stroke: color-mix(in srgb, var(--c) 35%, #fff);
stroke-width: 3;
}
.ldr-neon-sign-lit {
animation: ldr-neon-sign-buzz 3.2s steps(1, end) infinite;
}
@keyframes ldr-neon-sign-buzz {
0% { opacity: 0; }
4% { opacity: 1; }
6% { opacity: 0.2; }
9% { opacity: 1; }
10% { opacity: 0; }
14% { opacity: 1; }
62% { opacity: 0.55; }
63% { opacity: 1; }
90%, 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.ldr-neon-sign, .ldr-neon-sign *, .ldr-neon-sign::before, .ldr-neon-sign::after, .ldr-neon-sign *::before, .ldr-neon-sign *::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.