Heartbeat Pulse Loader
A dot beats twice in quick succession, lub then dub, and each beat throws off a ring that fades as it spreads. Beats and rings share one 1.2s clock so they never drift apart.
Also known as: heartbeat ring animation, lub dub pulse, double pulse loader.
HTML
<div class="ldr-heartbeat-pulse" role="status" aria-label="Loading"> <span></span><span></span> </div>
CSS
.ldr-heartbeat-pulse {
--s: var(--ldr-size, 48px);
--c: var(--ldr-color, #3b82f6);
position: relative;
width: var(--s);
height: var(--s);
}
.ldr-heartbeat-pulse::after {
content: "";
position: absolute;
inset: 32%;
border-radius: 50%;
background: var(--c);
animation: ldr-heartbeat-pulse-beat 1.2s infinite;
}
.ldr-heartbeat-pulse span {
position: absolute;
inset: 32%;
box-sizing: border-box;
border: calc(var(--s) / 18) solid var(--c);
border-radius: 50%;
opacity: 0;
animation: ldr-heartbeat-pulse-ring 1.2s cubic-bezier(0.1, 0.6, 0.4, 1) 0.08s infinite;
}
.ldr-heartbeat-pulse span + span { animation-delay: 0.34s; }
@keyframes ldr-heartbeat-pulse-beat {
0%, 42%, 100% { transform: scale(1); }
10% { transform: scale(1.3); }
20% { transform: scale(0.94); }
30% { transform: scale(1.2); }
}
@keyframes ldr-heartbeat-pulse-ring {
0% { transform: scale(1); opacity: 0.9; }
100% { transform: scale(2.7); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.ldr-heartbeat-pulse, .ldr-heartbeat-pulse *, .ldr-heartbeat-pulse::before, .ldr-heartbeat-pulse::after, .ldr-heartbeat-pulse *::before, .ldr-heartbeat-pulse *::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.