Gooey Blob Loader
Three blobs stretch apart and snap back together like mercury, using an SVG goo filter that works on any background. The filter is inline, so it still needs no external assets.
Also known as: metaball loader, liquid dots, blob animation.
HTML
<div class="ldr-gooey-blobs" role="status" aria-label="Loading">
<svg width="0" height="0" aria-hidden="true">
<filter id="ldr-goo">
<feGaussianBlur in="SourceGraphic" stdDeviation="6" result="blur" />
<feColorMatrix in="blur" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7" result="goo" />
<feComposite in="SourceGraphic" in2="goo" operator="atop" />
</filter>
</svg>
<div><span></span><span></span><span></span></div>
</div>CSS
.ldr-gooey-blobs {
--s: var(--ldr-size, 48px);
--c: var(--ldr-color, #3b82f6);
width: calc(var(--s) * 2);
height: var(--s);
}
.ldr-gooey-blobs > div {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
filter: url(#ldr-goo);
}
.ldr-gooey-blobs span {
width: calc(var(--s) / 2.6);
height: calc(var(--s) / 2.6);
margin: 0 calc(var(--s) / -24);
border-radius: 50%;
background: var(--c);
}
.ldr-gooey-blobs span:nth-child(1) { animation: ldr-gooey-blobs-left 1.6s ease-in-out infinite; }
.ldr-gooey-blobs span:nth-child(3) { animation: ldr-gooey-blobs-right 1.6s ease-in-out infinite; }
@keyframes ldr-gooey-blobs-left {
0%, 100% { transform: translateX(0); }
50% { transform: translateX(calc(var(--s) * -0.5)); }
}
@keyframes ldr-gooey-blobs-right {
0%, 100% { transform: translateX(0); }
50% { transform: translateX(calc(var(--s) * 0.5)); }
}
@media (prefers-reduced-motion: reduce) {
.ldr-gooey-blobs, .ldr-gooey-blobs *, .ldr-gooey-blobs::before, .ldr-gooey-blobs::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.