AI Thinking Loader
A small rounded square hops beside the word Thinking, squashing on landing, stretching on takeoff and turning a half circle in the air while its shadow shrinks and grows.
Also known as: thinking animation, ai thinking indicator, bouncing shape loader.
Thinking
HTML
<div class="ldr-ai-thinking-hop" role="status" aria-label="Thinking"> <span class="ldr-ai-thinking-hop-glyph" aria-hidden="true"><i></i></span> <span class="ldr-ai-thinking-hop-label">Thinking</span> </div>
CSS
.ldr-ai-thinking-hop {
--s: var(--ldr-size, 48px);
--c: var(--ldr-color, #3b82f6);
display: inline-flex;
align-items: flex-end;
gap: 0.6em;
padding-top: 1.2em;
font: 500 calc(var(--s) / 2.8) / 1 system-ui, sans-serif;
}
.ldr-ai-thinking-hop-glyph {
position: relative;
width: 0.9em;
height: 0.9em;
}
.ldr-ai-thinking-hop-glyph i {
position: absolute;
inset: 0;
border-radius: 24%;
background: var(--c);
transform-origin: 50% 100%;
animation: ldr-ai-thinking-hop-hop 1.1s infinite;
}
.ldr-ai-thinking-hop-glyph::after {
content: "";
position: absolute;
left: 5%;
right: 5%;
bottom: -0.2em;
height: 0.14em;
border-radius: 50%;
background: color-mix(in srgb, var(--ldr-color, #3b82f6) 35%, transparent);
animation: ldr-ai-thinking-hop-shadow 1.1s infinite;
}
.ldr-ai-thinking-hop-label {
color: color-mix(in srgb, currentColor 70%, transparent);
}
@keyframes ldr-ai-thinking-hop-hop {
0% {
transform: translateY(0) scale(1.25, 0.75) rotate(0deg);
animation-timing-function: cubic-bezier(0.2, 0.7, 0.4, 1);
}
12% {
transform: translateY(-0.1em) scale(0.85, 1.15) rotate(10deg);
animation-timing-function: cubic-bezier(0.25, 0.6, 0.45, 1);
}
48% {
transform: translateY(-1.15em) scale(1) rotate(90deg);
border-radius: 50%;
animation-timing-function: cubic-bezier(0.55, 0, 0.8, 0.4);
}
86% {
transform: translateY(0) scale(0.9, 1.1) rotate(170deg);
border-radius: 24%;
animation-timing-function: cubic-bezier(0.2, 0.7, 0.4, 1);
}
100% { transform: translateY(0) scale(1.25, 0.75) rotate(180deg); }
}
@keyframes ldr-ai-thinking-hop-shadow {
0%, 86%, 100% { transform: scaleX(1.15); opacity: 1; }
48% { transform: scaleX(0.5); opacity: 0.35; }
}
@media (prefers-reduced-motion: reduce) {
.ldr-ai-thinking-hop, .ldr-ai-thinking-hop *, .ldr-ai-thinking-hop::before, .ldr-ai-thinking-hop::after, .ldr-ai-thinking-hop *::before, .ldr-ai-thinking-hop *::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.