Morse Code Loader
Dashes and dots print across a line in real Morse timing, spelling OK, then fade and send again. A registered @property counter drives every symbol, so a dash takes three times as long as a dot.
Also known as: dots and dashes loader, telegraph animation, morse signal loader.
HTML
<div class="ldr-morse-code" role="status" aria-label="Loading"> <span style="--a: 0; --n: 3"></span><span style="--a: 4; --n: 3"></span><span style="--a: 8; --n: 3"></span> <span style="--a: 14; --n: 3"></span><span style="--a: 18; --n: 1"></span><span style="--a: 20; --n: 3"></span> </div>
CSS
@property --ldr-morse-code-t {
syntax: "<number>";
inherits: true;
initial-value: 0;
}
.ldr-morse-code {
--s: var(--ldr-size, 48px);
--c: var(--ldr-color, #3b82f6);
--u: calc(var(--s) / 10);
position: relative;
width: calc(var(--u) * 23);
height: calc(var(--u) * 1.3);
animation: ldr-morse-code-send 3.4s linear -1.1s infinite;
}
.ldr-morse-code span {
position: absolute;
top: 0;
left: calc(var(--a) * var(--u));
width: calc(var(--n) * var(--u));
height: 100%;
border-radius: var(--s);
background: var(--c);
transform-origin: 0 50%;
transform: scaleX(clamp(0, (var(--ldr-morse-code-t) - var(--a)) / var(--n), 1));
opacity: clamp(0.5, 1.5 - (var(--ldr-morse-code-t) - var(--a) - var(--n)) * 0.25, 1);
}
@keyframes ldr-morse-code-send {
0% { --ldr-morse-code-t: -3; opacity: 1; }
86% { opacity: 1; }
96% { opacity: 0; }
100% { --ldr-morse-code-t: 40; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.ldr-morse-code, .ldr-morse-code *, .ldr-morse-code::before, .ldr-morse-code::after, .ldr-morse-code *::before, .ldr-morse-code *::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.