AI Thinking Shimmer Text
A band of light sweeps through the word 'Thinking…', the status line every AI chat app shows while a model is working. Text stays selectable and screen-reader friendly.
Also known as: ChatGPT thinking animation, shimmer text, streaming response indicator.
Thinking…
HTML
<div class="ldr-ai-shimmer-text" role="status">Thinking…</div>
CSS
.ldr-ai-shimmer-text {
--s: var(--ldr-size, 48px);
--c: var(--ldr-color, #3b82f6);
font: 500 calc(var(--s) / 2.4) system-ui, sans-serif;
background: linear-gradient(90deg, color-mix(in srgb, var(--ldr-color, #3b82f6) 35%, transparent) 0%, var(--c) 50%, color-mix(in srgb, var(--ldr-color, #3b82f6) 35%, transparent) 100%);
background-size: 200% 100%;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
animation: ldr-ai-shimmer-text-sweep 1.6s linear infinite;
}
@keyframes ldr-ai-shimmer-text-sweep {
from { background-position: 100% 0; }
to { background-position: -100% 0; }
}
@media (prefers-reduced-motion: reduce) {
.ldr-ai-shimmer-text, .ldr-ai-shimmer-text *, .ldr-ai-shimmer-text::before, .ldr-ai-shimmer-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.