Soap Bubble Loader
A soap bubble that wobbles and bobs in place while a thin-film shimmer slides around its edge. The wobble and bob run on the separate scale and translate properties so they never fight.
Also known as: bubble animation css, iridescent bubble, floating bubble loader.
HTML
<div class="ldr-soap-bubble" role="status" aria-label="Loading"></div>
CSS
.ldr-soap-bubble {
--s: var(--ldr-size, 48px);
--c: var(--ldr-color, #3b82f6);
position: relative;
width: var(--s);
height: var(--s);
border-radius: 50%;
background: radial-gradient(circle, color-mix(in srgb, var(--ldr-color, #3b82f6) 6%, transparent) 45%, color-mix(in srgb, var(--ldr-color, #3b82f6) 25%, transparent) 68%, color-mix(in srgb, var(--ldr-color, #3b82f6) 75%, transparent) 92%, color-mix(in srgb, var(--ldr-color, #3b82f6) 35%, transparent) 100%);
animation: ldr-soap-bubble-wobble 0.9s ease-in-out infinite alternate, ldr-soap-bubble-bob 2.4s ease-in-out infinite;
}
.ldr-soap-bubble::before,
.ldr-soap-bubble::after {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
}
.ldr-soap-bubble::before {
background: conic-gradient(oklch(from var(--c) l c calc(h - 70)), transparent 18%, oklch(from var(--c) l c calc(h + 60)) 34%, transparent 52%, oklch(from var(--c) l c calc(h + 150)) 70%, transparent 86%, oklch(from var(--c) l c calc(h - 70)));
-webkit-mask: radial-gradient(closest-side, transparent 62%, #000 96%, transparent);
mask: radial-gradient(closest-side, transparent 62%, #000 96%, transparent);
opacity: 0.85;
animation: ldr-soap-bubble-film 3s linear infinite;
}
.ldr-soap-bubble::after {
background:
radial-gradient(ellipse 20% 13% at 32% 27%, color-mix(in srgb, var(--c) 15%, #fff), transparent),
radial-gradient(ellipse 9% 6% at 71% 76%, color-mix(in srgb, var(--c) 25%, #fff), transparent);
transform: rotate(-20deg);
}
@keyframes ldr-soap-bubble-wobble {
from { scale: 1.05 0.95; }
to { scale: 0.96 1.04; }
}
@keyframes ldr-soap-bubble-bob {
0%, 100% { translate: 0 calc(var(--s) * 0.05); }
50% { translate: 0 calc(var(--s) * -0.05); }
}
@keyframes ldr-soap-bubble-film {
to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
.ldr-soap-bubble, .ldr-soap-bubble *, .ldr-soap-bubble::before, .ldr-soap-bubble::after, .ldr-soap-bubble *::before, .ldr-soap-bubble *::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.