Bokeh Lights Loader
Soft out-of-focus discs in neighboring hues drift and brighten one after another, like city lights through a fast lens. Each disc has the brighter rim real bokeh has. Good for ambient waits.
Also known as: bokeh animation css, floating lights, blurred circles background.
HTML
<div class="ldr-bokeh" role="status" aria-label="Loading"> <span></span><span></span><span></span><span></span><span></span> </div>
CSS
.ldr-bokeh {
--s: var(--ldr-size, 48px);
--c: var(--ldr-color, #3b82f6);
position: relative;
width: calc(var(--s) * 1.8);
height: var(--s);
}
.ldr-bokeh span {
--k: oklch(from var(--c) l c calc(h + var(--h)));
position: absolute;
left: var(--x);
top: var(--y);
width: var(--d);
height: var(--d);
border-radius: 50%;
background: radial-gradient(closest-side, color-mix(in srgb, var(--k) 40%, transparent) 62%, color-mix(in srgb, var(--k) 85%, transparent) 90%, transparent);
filter: blur(calc(var(--s) / 60));
opacity: 0.25;
animation: ldr-bokeh-drift var(--t) ease-in-out var(--delay) infinite;
}
.ldr-bokeh span:nth-child(1) { --x: 4%; --y: 22%; --d: calc(var(--s) * 0.56); --h: 0; --t: 3.2s; --delay: 0s; }
.ldr-bokeh span:nth-child(2) { --x: 30%; --y: 46%; --d: calc(var(--s) * 0.4); --h: 45; --t: 2.6s; --delay: -0.8s; }
.ldr-bokeh span:nth-child(3) { --x: 46%; --y: 4%; --d: calc(var(--s) * 0.5); --h: -45; --t: 3.6s; --delay: -1.9s; }
.ldr-bokeh span:nth-child(4) { --x: 64%; --y: 36%; --d: calc(var(--s) * 0.58); --h: 80; --t: 3s; --delay: -1.2s; }
.ldr-bokeh span:nth-child(5) { --x: 22%; --y: 0%; --d: calc(var(--s) * 0.3); --h: -80; --t: 2.8s; --delay: -2.3s; }
@keyframes ldr-bokeh-drift {
0%, 100% { transform: translate(0, 0) scale(0.85); opacity: 0.25; }
50% { transform: translate(calc(var(--s) * 0.08), calc(var(--s) * -0.06)) scale(1.05); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.ldr-bokeh, .ldr-bokeh *, .ldr-bokeh::before, .ldr-bokeh::after, .ldr-bokeh *::before, .ldr-bokeh *::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.