Footsteps Loader
Shoe prints stamp down left, right, left across the card and fade behind the walker. Good for onboarding, step-by-step flows and anything 'on its way'.
Also known as: walking footprints animation, footprint loader css, steps loading animation.
HTML
<div class="ldr-footsteps" role="status" aria-label="Loading"> <span style="--i: 0"></span><span style="--i: 1"></span><span style="--i: 2"></span> <span style="--i: 3"></span><span style="--i: 4"></span><span style="--i: 5"></span> </div>
CSS
.ldr-footsteps {
--s: var(--ldr-size, 48px);
--c: var(--ldr-color, #3b82f6);
position: relative;
width: calc(var(--s) * 1.7);
height: var(--s);
}
.ldr-footsteps span {
position: absolute;
left: calc(3% + var(--i) * 15.5%);
top: 26%;
width: calc(var(--s) * 0.26);
height: calc(var(--s) * 0.15);
border-radius: 40% 60% 60% 40% / 50%;
background: var(--c);
opacity: 0;
transform: rotate(-8deg);
animation: ldr-footsteps-step 2.4s ease-out calc(var(--i) * 0.4s - 2.4s) infinite;
}
.ldr-footsteps span:nth-child(even) {
top: 56%;
transform: rotate(8deg);
}
.ldr-footsteps span::before {
content: "";
position: absolute;
right: calc(100% + var(--s) * 0.035);
top: 14%;
width: calc(var(--s) * 0.12);
height: 76%;
border-radius: 50%;
background: var(--c);
}
@keyframes ldr-footsteps-step {
0% { opacity: 0; scale: 1.25; }
5% { opacity: 1; scale: 1; }
40% { opacity: 1; }
70%, 100% { opacity: 0; scale: 1; }
}
@media (prefers-reduced-motion: reduce) {
.ldr-footsteps, .ldr-footsteps *, .ldr-footsteps::before, .ldr-footsteps::after, .ldr-footsteps *::before, .ldr-footsteps *::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.