Piano Keys Loader
Five white keys light up and dip in an ascending run while the black keys sit on top, a tiny piano playing a scale. Suits music apps and anything creative; the black keys use a currentColor mix.
Also known as: piano animation css, keyboard keys loader, music keys loader.
HTML
<div class="ldr-piano-keys" 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> <i style="--k: 1"></i><i style="--k: 2"></i><i style="--k: 4"></i> </div>
CSS
.ldr-piano-keys {
--s: var(--ldr-size, 48px);
--c: var(--ldr-color, #3b82f6);
--w: calc(var(--s) / 4.2);
--g: calc(var(--s) / 28);
position: relative;
display: flex;
gap: var(--g);
height: calc(var(--s) * 0.9);
}
.ldr-piano-keys span {
position: relative;
width: var(--w);
overflow: hidden;
border-radius: 0 0 calc(var(--s) / 20) calc(var(--s) / 20);
background: color-mix(in srgb, var(--ldr-color, #3b82f6) 20%, transparent);
animation: ldr-piano-keys-press 1.4s infinite;
animation-delay: calc(var(--i) * 0.14s);
}
.ldr-piano-keys span::after {
content: "";
position: absolute;
inset: 0;
background: var(--c);
opacity: 0;
animation: ldr-piano-keys-light 1.4s infinite;
animation-delay: calc(var(--i) * 0.14s);
}
.ldr-piano-keys i {
position: absolute;
z-index: 1;
top: 0;
left: calc(var(--k) * (var(--w) + var(--g)) - var(--g) / 2 - var(--w) * 0.3);
width: calc(var(--w) * 0.6);
height: 56%;
border-radius: 0 0 calc(var(--s) / 30) calc(var(--s) / 30);
background: color-mix(in srgb, var(--c) 30%, currentColor);
}
@keyframes ldr-piano-keys-press {
0%, 100% { transform: translateY(0); }
6% { transform: translateY(calc(var(--s) / 30)); animation-timing-function: cubic-bezier(0.3, 0.7, 0.4, 1); }
30% { transform: translateY(0); }
}
@keyframes ldr-piano-keys-light {
0%, 100% { opacity: 0; }
6% { opacity: 1; animation-timing-function: ease-out; }
40% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.ldr-piano-keys, .ldr-piano-keys *, .ldr-piano-keys::before, .ldr-piano-keys::after, .ldr-piano-keys *::before, .ldr-piano-keys *::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.