Loading Text with Spinning O
The word Loading where the letter o is a small ring spinner sitting on the baseline. Sized in em, so it matches whatever font size the surrounding text uses.
Also known as: loading text with spinner letter, spinning o loader, loading word spinner.
Lading
HTML
<div class="ldr-spinning-o-text" role="status" aria-label="Loading">L<span aria-hidden="true"></span>ading</div>
CSS
.ldr-spinning-o-text {
--s: var(--ldr-size, 48px);
--c: var(--ldr-color, #3b82f6);
font: 700 calc(var(--s) / 2) / 1 system-ui, sans-serif;
letter-spacing: 0.01em;
color: var(--c);
}
.ldr-spinning-o-text span {
display: inline-block;
width: 0.6em;
height: 0.6em;
margin: 0 0.05em 0 0.03em;
box-sizing: border-box;
border: 0.13em solid color-mix(in srgb, var(--ldr-color, #3b82f6) 25%, transparent);
border-top-color: var(--c);
border-right-color: var(--c);
border-radius: 50%;
animation: ldr-spinning-o-text-spin 0.8s cubic-bezier(0.5, 0.15, 0.5, 0.85) infinite;
}
@keyframes ldr-spinning-o-text-spin {
to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
.ldr-spinning-o-text, .ldr-spinning-o-text *, .ldr-spinning-o-text::before, .ldr-spinning-o-text::after, .ldr-spinning-o-text *::before, .ldr-spinning-o-text *::after {
animation-duration: 3s;
}
}Tailwind CSS version
The same loader using only Tailwind's built-in animation utilities. No custom keyframes or config needed.
<div class="text-2xl font-bold text-blue-500" role="status" aria-label="Loading">L<span class="mx-[0.04em] inline-block h-[0.6em] w-[0.6em] animate-spin rounded-full border-[0.13em] border-blue-500/25 border-r-blue-500 border-t-blue-500" aria-hidden="true"></span>ading</div>
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.