Stacking Dots Loader
Three dots fall in one at a time and settle into a cannonball pyramid, then shrink away together. clamp() on each dot's --i decides which dots have landed, so all three share keyframes.
Also known as: cannonball stack loader, falling dots pile, dots dropping animation.
HTML
<div class="ldr-stacking-dots" role="status" aria-label="Loading"> <span style="--i:0;--x:-0.5;--y:0"></span><span style="--i:1;--x:0.5;--y:0"></span><span style="--i:2;--x:0;--y:-0.87"></span> </div>
CSS
.ldr-stacking-dots {
--s: var(--ldr-size, 48px);
--c: var(--ldr-color, #3b82f6);
--d: calc(var(--s) / 3.6);
--h: calc(var(--s) * 0.75);
position: relative;
width: calc(var(--d) * 2);
height: calc(var(--h) + var(--d) * 1.9);
}
.ldr-stacking-dots span {
position: absolute;
bottom: 0;
left: calc(50% - var(--d) / 2);
width: var(--d);
height: var(--d);
animation: ldr-stacking-dots-drop 2.4s cubic-bezier(0.55, 0, 1, 0.45) infinite;
}
.ldr-stacking-dots span::before {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
background: var(--c);
opacity: 0;
animation: ldr-stacking-dots-show 2.4s cubic-bezier(0, 0.7, 0.3, 1) infinite;
}
@keyframes ldr-stacking-dots-drop {
0%, 100% { transform: translate(calc(var(--x) * var(--d)), calc(var(--y) * var(--d) - var(--h))); }
15% { transform: translate(calc(var(--x) * var(--d)), calc(var(--y) * var(--d) - var(--h) * clamp(0, var(--i), 1))); }
30% { transform: translate(calc(var(--x) * var(--d)), calc(var(--y) * var(--d) - var(--h) * clamp(0, var(--i) - 1, 1))); }
45%, 72% { transform: translate(calc(var(--x) * var(--d)), calc(var(--y) * var(--d))) scale(1); }
86% { transform: translate(calc(var(--x) * var(--d)), calc(var(--y) * var(--d))) scale(0); }
}
@keyframes ldr-stacking-dots-show {
0%, 86%, 100% { opacity: 0; }
15% { opacity: calc(1 - clamp(0, var(--i), 1)); }
30% { opacity: calc(1 - clamp(0, var(--i) - 1, 1)); }
45%, 72% { opacity: 1; animation-timing-function: cubic-bezier(0.5, 0, 0.9, 0.6); }
}
@media (prefers-reduced-motion: reduce) {
.ldr-stacking-dots, .ldr-stacking-dots *, .ldr-stacking-dots::before, .ldr-stacking-dots::after, .ldr-stacking-dots *::before, .ldr-stacking-dots *::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.