Fireflies Loader
Six tiny glowing points wander on their own looping paths and blink in and out, like fireflies at dusk. Paths share one keyframe scaled by per-dot custom properties, so each flight looks different.
Also known as: glowing particles animation, floating lights css, firefly effect.
HTML
<div class="ldr-fireflies" role="status" aria-label="Loading"> <span></span><span></span><span></span><span></span><span></span><span></span> </div>
CSS
.ldr-fireflies {
--s: var(--ldr-size, 48px);
--c: var(--ldr-color, #3b82f6);
position: relative;
width: calc(var(--s) * 1.8);
height: var(--s);
}
.ldr-fireflies span {
position: absolute;
left: var(--x);
top: var(--y);
width: calc(var(--s) * 0.11);
height: calc(var(--s) * 0.11);
border-radius: 50%;
background: var(--c);
box-shadow: 0 0 calc(var(--s) / 8) calc(var(--s) / 30) color-mix(in srgb, var(--ldr-color, #3b82f6) 65%, transparent);
animation: ldr-fireflies-wander var(--t) ease-in-out infinite, ldr-fireflies-blink 1.8s ease-in-out infinite;
animation-delay: var(--delay), calc(var(--delay) * 0.7);
}
.ldr-fireflies span:nth-child(1) { --x: 12%; --y: 30%; --ax: calc(var(--s) * 0.2); --ay: calc(var(--s) * 0.14); --t: 3.4s; --delay: 0s; }
.ldr-fireflies span:nth-child(2) { --x: 34%; --y: 62%; --ax: calc(var(--s) * -0.18); --ay: calc(var(--s) * 0.16); --t: 4.1s; --delay: -1.3s; }
.ldr-fireflies span:nth-child(3) { --x: 52%; --y: 22%; --ax: calc(var(--s) * 0.22); --ay: calc(var(--s) * -0.12); --t: 3.8s; --delay: -2.2s; }
.ldr-fireflies span:nth-child(4) { --x: 70%; --y: 58%; --ax: calc(var(--s) * -0.2); --ay: calc(var(--s) * -0.16); --t: 4.4s; --delay: -0.7s; }
.ldr-fireflies span:nth-child(5) { --x: 84%; --y: 32%; --ax: calc(var(--s) * -0.16); --ay: calc(var(--s) * 0.14); --t: 3.6s; --delay: -2.9s; }
.ldr-fireflies span:nth-child(6) { --x: 24%; --y: 46%; --ax: calc(var(--s) * 0.14); --ay: calc(var(--s) * -0.18); --t: 4.8s; --delay: -1.9s; }
@keyframes ldr-fireflies-wander {
0%, 100% { translate: 0 0; }
25% { translate: var(--ax) calc(var(--ay) * -1); }
50% { translate: calc(var(--ax) * 0.4) calc(var(--ay) * 0.8); }
75% { translate: calc(var(--ax) * -0.8) calc(var(--ay) * 0.3); }
}
@keyframes ldr-fireflies-blink {
0%, 100% { opacity: 0.15; transform: scale(0.6); }
50% { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
.ldr-fireflies, .ldr-fireflies *, .ldr-fireflies::before, .ldr-fireflies::after, .ldr-fireflies *::before, .ldr-fireflies *::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.