Split Flap Text Loader
LOADING spelled on split-flap tiles, like an airport departure board: each tile's top flap falls and the bottom flap snaps into place, rippling left to right. Letters come from a data attribute.
Also known as: split flap display css, departure board animation, flip board text.
HTML
<div class="ldr-split-flap-text" role="status" aria-label="Loading"> <span data-l="L" aria-hidden="true">L</span><span data-l="O" aria-hidden="true">O</span><span data-l="A" aria-hidden="true">A</span><span data-l="D" aria-hidden="true">D</span><span data-l="I" aria-hidden="true">I</span><span data-l="N" aria-hidden="true">N</span><span data-l="G" aria-hidden="true">G</span> </div>
CSS
.ldr-split-flap-text {
--s: var(--ldr-size, 48px);
--c: var(--ldr-color, #3b82f6);
--dark: color-mix(in srgb, var(--c), #000 40%);
display: inline-flex;
gap: 0.12em;
font: 700 calc(var(--s) / 2.4) / 1.4em ui-monospace, SFMono-Regular, Menlo, monospace;
color: #fff;
}
.ldr-split-flap-text span {
position: relative;
width: 0.95em;
height: 1.4em;
border-radius: 0.14em;
text-align: center;
background: linear-gradient(var(--c) 0 calc(50% - 0.5px), var(--dark) 0 calc(50% + 0.5px), var(--c) 0);
perspective: 4em;
}
.ldr-split-flap-text span::before,
.ldr-split-flap-text span::after {
content: attr(data-l);
position: absolute;
left: 0;
right: 0;
height: calc(50% - 0.5px);
overflow: hidden;
background: var(--c);
animation-duration: 2.6s;
animation-iteration-count: infinite;
animation-delay: calc(var(--i, 0) * 0.1s - 2.6s);
}
.ldr-split-flap-text span::before {
top: 0;
border-radius: 0.14em 0.14em 0 0;
transform-origin: 50% 100%;
animation-name: ldr-split-flap-text-fall;
}
.ldr-split-flap-text span::after {
bottom: 0;
display: flex;
align-items: flex-end;
justify-content: center;
border-radius: 0 0 0.14em 0.14em;
transform-origin: 50% 0;
transform: rotateX(90deg);
animation-name: ldr-split-flap-text-land;
}
.ldr-split-flap-text span:nth-child(2) { --i: 1; }
.ldr-split-flap-text span:nth-child(3) { --i: 2; }
.ldr-split-flap-text span:nth-child(4) { --i: 3; }
.ldr-split-flap-text span:nth-child(5) { --i: 4; }
.ldr-split-flap-text span:nth-child(6) { --i: 5; }
.ldr-split-flap-text span:nth-child(7) { --i: 6; }
@keyframes ldr-split-flap-text-fall {
0% { transform: rotateX(0deg); filter: brightness(1); animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
9.9% { transform: rotateX(-86deg); filter: brightness(0.6); visibility: visible; }
10% { transform: rotateX(-90deg); visibility: hidden; }
10.01%, 100% { transform: rotateX(0deg); filter: brightness(1); visibility: visible; }
}
@keyframes ldr-split-flap-text-land {
0%, 9.9% { transform: rotateX(90deg); visibility: hidden; }
10% { transform: rotateX(90deg); visibility: visible; filter: brightness(0.6); animation-timing-function: cubic-bezier(0.3, 1.5, 0.6, 1); }
20% { transform: rotateX(0deg); filter: brightness(1); }
100% { transform: rotateX(0deg); visibility: visible; filter: brightness(1); }
}
@media (prefers-reduced-motion: reduce) {
.ldr-split-flap-text, .ldr-split-flap-text *, .ldr-split-flap-text::before, .ldr-split-flap-text::after, .ldr-split-flap-text *::before, .ldr-split-flap-text *::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.