Loading Text with Animated Dots
The word 'Loading' followed by three dots that appear one at a time. Change the text to anything: Saving, Thinking, Generating.
Also known as: animated ellipsis, loading dots text.
Loading...
HTML
<div class="ldr-loading-text" role="status"> Loading<span>.</span><span>.</span><span>.</span> </div>
CSS
.ldr-loading-text {
--s: var(--ldr-size, 48px);
--c: var(--ldr-color, #3b82f6);
font: 600 calc(var(--s) / 2.4) / 1 system-ui, sans-serif;
color: var(--c);
letter-spacing: 0.02em;
}
.ldr-loading-text span {
animation: ldr-loading-text-dot 1.2s steps(1, end) infinite;
opacity: 0;
}
.ldr-loading-text span:nth-child(2) { animation-delay: 0.3s; }
.ldr-loading-text span:nth-child(3) { animation-delay: 0.6s; }
@keyframes ldr-loading-text-dot {
0% { opacity: 0; }
25%, 75% { opacity: 1; }
100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.ldr-loading-text, .ldr-loading-text *, .ldr-loading-text::before, .ldr-loading-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.