Pong Loader
Two paddles rally a square ball across a dashed net, each sliding into place just in time for the return. The four-shot rally repeats without a jump; sine easing makes the paddles feel human.
Also known as: ping pong loader, retro game loading animation, paddle and ball loader.
HTML
<div class="ldr-pong" role="status" aria-label="Loading"> <span></span><span></span><i></i> </div>
CSS
.ldr-pong {
--s: var(--ldr-size, 48px);
--c: var(--ldr-color, #3b82f6);
--pw: calc(var(--s) / 10);
--ph: calc(var(--s) / 2.8);
--b: calc(var(--s) / 8);
position: relative;
width: calc(var(--s) * 1.8);
height: var(--s);
}
.ldr-pong::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: calc(50% - var(--s) / 60);
width: calc(var(--s) / 30);
background: repeating-linear-gradient(to bottom, color-mix(in srgb, var(--ldr-color, #3b82f6) 35%, transparent) 0 calc(var(--s) / 12), transparent 0 calc(var(--s) / 6));
}
.ldr-pong span {
position: absolute;
top: 0;
left: 0;
width: var(--pw);
height: var(--ph);
border-radius: calc(var(--s) / 40);
background: var(--c);
animation: ldr-pong-left 3.2s cubic-bezier(0.37, 0, 0.63, 1) infinite;
}
.ldr-pong span + span {
left: auto;
right: 0;
animation-name: ldr-pong-right;
}
.ldr-pong i {
position: absolute;
top: 0;
left: 0;
width: var(--b);
height: var(--b);
border-radius: calc(var(--s) / 50);
background: var(--c);
animation: ldr-pong-ball 3.2s linear infinite;
}
@keyframes ldr-pong-ball {
0%, 100% { transform: translate(var(--pw), calc(var(--s) * 0.219)); }
25% { transform: translate(calc(var(--s) * 1.8 - var(--pw) - var(--b)), calc(var(--s) * 0.656)); }
50% { transform: translate(var(--pw), calc(var(--s) * 0.525)); }
75% { transform: translate(calc(var(--s) * 1.8 - var(--pw) - var(--b)), calc(var(--s) * 0.131)); }
}
@keyframes ldr-pong-left {
0%, 100% { transform: translateY(calc(var(--s) * 0.103)); }
50% { transform: translateY(calc(var(--s) * 0.409)); }
}
@keyframes ldr-pong-right {
0%, 100% { transform: translateY(calc(var(--s) * 0.278)); animation-timing-function: cubic-bezier(0.61, 1, 0.88, 1); }
25% { transform: translateY(calc(var(--s) * 0.54)); animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
75% { transform: translateY(calc(var(--s) * 0.015)); animation-timing-function: cubic-bezier(0.12, 0, 0.39, 0); }
}
@media (prefers-reduced-motion: reduce) {
.ldr-pong, .ldr-pong *, .ldr-pong::before, .ldr-pong::after, .ldr-pong *::before, .ldr-pong *::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.