Google AI Thinking Animation.
The conic-gradient bloom you keep seeing in Gemini, AI Studio, and search overlays — extracted, refined, and ready to paste. Four variants. No JavaScript. No dependencies.
That glow you see while AI thinks.
When Google's AI products are processing, they wrap the trigger element in a soft, rotating, color-shifting halo. It signals working without dimming the surface or stealing focus. Here it is, dissected into four reusable forms.
One conic-gradient, two @property vars.
Each snippet animates two custom properties: --angle for rotation and --c1 for the color cycle. A blur filter softens the seam. The opaque inner pill sits above with z-index, so only the rim glows.
Drop it around a button, an icon, a search box — anywhere processing happens.
Rounded Pill Bloom
The full-pill variant with a soft trailing glow — best for text buttons or status labels. Most "Gemini-like" of the set.
Rounded Rectangle (radius 12)
Softer geometry for status pills with longer labels. Use this for "thinking", "searching", or "processing" hints.
Perfect Square — Text Center
80×80 square halo around a centered label. Compact, icon-button-shaped — drop it on a search or AI trigger.
Perfect Square — Icon Center
Same geometry, replaced with a Lucide-style icon (clock here, swap freely). Ideal for floating action buttons during processing.
Knobs you'll probably want to turn
- SpeedThe
cg-rotateduration. Default is1.9s. Faster (1.2s) reads more urgent; slower (3s) reads more "thoughtful". - ColorsThree stops in
cg-hue. Swap the RGB triplets for your brand. Keep three stops so the loop seam stays invisible. - Blur
filter: blur(5–7px). More blur = softer, dreamier. Less blur = sharper, more "scanner-line". - Gap anglesThe transparent arc inside
conic-gradient. Widen the transparent range for a thinner trail; narrow it for a fuller halo.