Music Notes Loader
Two eighth notes and a beamed pair hop in a wave and tilt as they land, like a tune bouncing along. Good for audio, playlist and podcast screens; each note is one span plus pseudo-elements.
Also known as: music notes animation, bouncing music notes css, audio loading animation.
HTML
<div class="ldr-music-notes" role="status" aria-label="Loading"> <span class="ldr-music-notes-single"></span> <span class="ldr-music-notes-pair"></span> <span class="ldr-music-notes-single"></span> </div>
CSS
.ldr-music-notes {
--s: var(--ldr-size, 48px);
--c: var(--ldr-color, #3b82f6);
--stem: calc(var(--s) / 16);
position: relative;
width: calc(var(--s) * 1.4);
height: var(--s);
}
.ldr-music-notes span {
position: absolute;
bottom: 18%;
height: calc(var(--s) * 0.52);
transform-origin: 50% 100%;
animation: ldr-music-notes-hop 1.2s ease-in-out infinite;
}
.ldr-music-notes span::before,
.ldr-music-notes-pair::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: calc(var(--s) * 0.2);
height: calc(var(--s) * 0.15);
border-radius: 50%;
background: var(--c);
transform: rotate(-24deg);
}
.ldr-music-notes-single {
width: calc(var(--s) * 0.22);
background: linear-gradient(var(--c) 0 0) 100% 0 / var(--stem) 88% no-repeat;
}
.ldr-music-notes-single:first-child { left: 4%; }
.ldr-music-notes-single:last-child {
left: 72%;
bottom: 24%;
animation-delay: 0.3s;
}
.ldr-music-notes-single::after {
content: "";
position: absolute;
left: calc(100% - var(--stem));
top: 0;
width: calc(var(--s) * 0.12);
height: calc(var(--s) * 0.22);
box-sizing: border-box;
border: solid var(--c);
border-width: var(--stem) var(--stem) 0 0;
border-radius: 0 100% 0 0 / 0 70% 0 0;
}
.ldr-music-notes-pair {
left: 34%;
bottom: 30%;
width: calc(var(--s) * 0.4);
background:
linear-gradient(var(--c) 0 0) calc(var(--s) * 0.1375) 0 / calc(var(--s) * 0.2625) calc(var(--s) / 11) no-repeat,
linear-gradient(var(--c) 0 0) calc(var(--s) * 0.1375) 0 / var(--stem) 88% no-repeat,
linear-gradient(var(--c) 0 0) 100% 0 / var(--stem) 88% no-repeat;
animation-delay: 0.15s;
}
.ldr-music-notes-pair::after {
left: calc(var(--s) * 0.2);
}
@keyframes ldr-music-notes-hop {
0%, 100% { transform: translateY(0) rotate(0) scale(1); }
30% { transform: translateY(calc(var(--s) * -0.16)) rotate(-10deg) scale(1); }
55% { transform: translateY(0) rotate(4deg) scale(1.06, 0.9); }
70% { transform: translateY(0) rotate(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
.ldr-music-notes, .ldr-music-notes *, .ldr-music-notes::before, .ldr-music-notes::after, .ldr-music-notes *::before, .ldr-music-notes *::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.