Text Fill Loading Animation
Outlined LOADING letters fill with solid color from the left, then the fill slides out to the right. A text stroke plus a moving background clipped to the glyphs, no extra markup.
Also known as: loading text fill css, outline text fill loader, text progress fill.
LOADING
HTML
<div class="ldr-text-fill-loading" role="status" aria-label="Loading">LOADING</div>
CSS
.ldr-text-fill-loading {
--s: var(--ldr-size, 48px);
--c: var(--ldr-color, #3b82f6);
font: 900 calc(var(--s) / 1.7) / 1 "Arial Black", "Helvetica Neue", Arial, sans-serif;
letter-spacing: 0.04em;
color: transparent;
-webkit-text-fill-color: transparent;
-webkit-text-stroke: max(1px, calc(var(--s) / 36)) var(--c);
background: linear-gradient(90deg, transparent 33.34%, var(--c) 33.34% 66.66%, transparent 66.66%);
background-size: 300% 100%;
background-position: 100% 0;
-webkit-background-clip: text;
background-clip: text;
animation: ldr-text-fill-loading-fill 2.8s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes ldr-text-fill-loading-fill {
0% { background-position: 100% 0; }
45%, 60% { background-position: 50% 0; }
100% { background-position: 0% 0; }
}
@media (prefers-reduced-motion: reduce) {
.ldr-text-fill-loading, .ldr-text-fill-loading *, .ldr-text-fill-loading::before, .ldr-text-fill-loading::after, .ldr-text-fill-loading *::before, .ldr-text-fill-loading *::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.