Trampoline Dot Loader
A dot drops onto a taut line, sinks it into a V as it squashes, and gets flung back up while the line wobbles flat. Each half of the line is a pseudo-element hinged at its outer end.
Also known as: bouncing dot on trampoline, springy dot loader, bounce pad animation.
HTML
<div class="ldr-trampoline-dot" role="status" aria-label="Loading"> <span></span> </div>
CSS
.ldr-trampoline-dot {
--s: var(--ldr-size, 48px);
--c: var(--ldr-color, #3b82f6);
--d: calc(var(--s) / 4);
--t: calc(var(--s) / 18);
position: relative;
width: calc(var(--s) * 1.3);
height: calc(var(--s) * 1.2);
}
.ldr-trampoline-dot::before,
.ldr-trampoline-dot::after {
content: "";
position: absolute;
bottom: calc(var(--s) * 0.2);
width: 50.5%;
height: var(--t);
border-radius: var(--t);
background: color-mix(in srgb, var(--ldr-color, #3b82f6) 60%, transparent);
}
.ldr-trampoline-dot::before {
--dir: 1;
left: 0;
transform-origin: calc(var(--t) / 2) 50%;
animation: ldr-trampoline-dot-bed 1.2s infinite;
}
.ldr-trampoline-dot::after {
--dir: -1;
right: 0;
transform-origin: calc(100% - var(--t) / 2) 50%;
animation: ldr-trampoline-dot-bed 1.2s infinite;
}
.ldr-trampoline-dot span {
position: absolute;
bottom: calc(var(--s) * 0.2 + var(--t));
left: calc(50% - var(--d) / 2);
width: var(--d);
height: var(--d);
border-radius: 50%;
background: var(--c);
transform-origin: 50% 100%;
animation: ldr-trampoline-dot-ball 1.2s infinite;
}
@keyframes ldr-trampoline-dot-ball {
0%, 100% { transform: translateY(calc(var(--s) * -0.62)) scale(1, 1); animation-timing-function: cubic-bezier(0.5, 0, 0.9, 0.5); }
40% { transform: translateY(0) scale(0.92, 1.08); animation-timing-function: cubic-bezier(0.2, 0.6, 0.5, 1); }
50% { transform: translateY(calc(var(--s) * 0.13)) scale(1.28, 0.74); animation-timing-function: cubic-bezier(0.5, 0, 0.8, 0.5); }
60% { transform: translateY(0) scale(0.9, 1.12); animation-timing-function: cubic-bezier(0.1, 0.5, 0.5, 1); }
}
@keyframes ldr-trampoline-dot-bed {
0%, 40%, 84%, 100% { transform: rotate(0deg); animation-timing-function: cubic-bezier(0.2, 0.6, 0.5, 1); }
50% { transform: rotate(calc(var(--dir) * 12deg)); animation-timing-function: cubic-bezier(0.5, 0, 0.8, 0.5); }
60% { transform: rotate(0deg); animation-timing-function: ease-out; }
67% { transform: rotate(calc(var(--dir) * -4deg)); animation-timing-function: ease-in-out; }
75% { transform: rotate(calc(var(--dir) * 1.5deg)); animation-timing-function: ease-in-out; }
}
@media (prefers-reduced-motion: reduce) {
.ldr-trampoline-dot, .ldr-trampoline-dot *, .ldr-trampoline-dot::before, .ldr-trampoline-dot::after, .ldr-trampoline-dot *::before, .ldr-trampoline-dot *::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.