Ink Drop Loader
A drop of ink falls into a glass of water, sends a small ripple across the surface, and blooms into soft swirling clouds that fade before the next drop lands. Blurred blobs do the bloom.
Also known as: ink in water animation, drop and bloom loader, watercolor bloom.
HTML
<div class="ldr-ink-drop" role="status" aria-label="Loading"> <span class="ldr-ink-drop-drop"></span> <span class="ldr-ink-drop-cloud"></span><span class="ldr-ink-drop-cloud"></span><span class="ldr-ink-drop-cloud"></span> </div>
CSS
.ldr-ink-drop {
--s: var(--ldr-size, 48px);
--c: var(--ldr-color, #3b82f6);
position: relative;
width: calc(var(--s) * 1.1);
height: calc(var(--s) * 1.2);
border-radius: 0 0 calc(var(--s) * 0.22) calc(var(--s) * 0.22);
background: linear-gradient(transparent 30%, color-mix(in srgb, var(--ldr-color, #3b82f6) 12%, transparent) 30%);
overflow: hidden;
}
.ldr-ink-drop::before,
.ldr-ink-drop::after {
content: "";
position: absolute;
left: 0;
right: 0;
top: 30%;
}
.ldr-ink-drop::before {
height: 1px;
background: color-mix(in srgb, var(--ldr-color, #3b82f6) 45%, transparent);
}
.ldr-ink-drop::after {
left: 50%;
right: auto;
width: calc(var(--s) * 0.5);
height: calc(var(--s) * 0.1);
margin: calc(var(--s) * -0.05) 0 0 calc(var(--s) * -0.25);
border: calc(var(--s) / 30) solid color-mix(in srgb, var(--ldr-color, #3b82f6) 60%, transparent);
border-radius: 50%;
opacity: 0;
animation: ldr-ink-drop-ripple 2.8s ease-out infinite;
}
.ldr-ink-drop-drop {
position: absolute;
top: 0;
left: 50%;
width: calc(var(--s) * 0.12);
height: calc(var(--s) * 0.16);
margin-left: calc(var(--s) * -0.06);
border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
background: var(--c);
animation: ldr-ink-drop-fall 2.8s infinite;
}
.ldr-ink-drop-cloud {
position: absolute;
top: 30%;
left: 50%;
width: calc(var(--s) * 0.4);
height: calc(var(--s) * 0.4);
margin: calc(var(--s) * -0.08) 0 0 calc(var(--s) * -0.2);
border-radius: 45% 55% 60% 40%;
background: var(--c);
filter: blur(calc(var(--s) / 16));
opacity: 0;
animation: ldr-ink-drop-bloom 2.8s cubic-bezier(0.2, 0.6, 0.35, 1) infinite;
}
.ldr-ink-drop-cloud:nth-of-type(2) { --dx: calc(var(--s) * -0.26); --dy: calc(var(--s) * 0.42); --r: -60deg; }
.ldr-ink-drop-cloud:nth-of-type(3) { --dx: calc(var(--s) * 0.02); --dy: calc(var(--s) * 0.56); --r: 40deg; }
.ldr-ink-drop-cloud:nth-of-type(4) { --dx: calc(var(--s) * 0.28); --dy: calc(var(--s) * 0.36); --r: 80deg; }
@keyframes ldr-ink-drop-fall {
0% { transform: translateY(calc(var(--s) * -0.2)); opacity: 1; animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5); }
22% { transform: translateY(calc(var(--s) * 0.24)); opacity: 1; }
24%, 100% { transform: translateY(calc(var(--s) * 0.3)); opacity: 0; }
}
@keyframes ldr-ink-drop-ripple {
0%, 21% { transform: scale(0.2); opacity: 0; }
24% { opacity: 1; }
55%, 100% { transform: scale(2); opacity: 0; }
}
@keyframes ldr-ink-drop-bloom {
0%, 21% { transform: translate(0, 0) scale(0.1) rotate(0deg); opacity: 0; }
28% { opacity: 0.9; }
70% { opacity: 0.55; }
100% { transform: translate(var(--dx), var(--dy)) scale(1.3) rotate(var(--r)); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.ldr-ink-drop, .ldr-ink-drop *, .ldr-ink-drop::before, .ldr-ink-drop::after, .ldr-ink-drop *::before, .ldr-ink-drop *::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.