AI Loading Animations

16 CSS loading states for AI features: thinking shimmers, streaming responses, typing bubbles, sparkles and 'generating' indicators for chatbots and assistants.

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.

text · ai · inline · subtle

Blinking Cursor

A block cursor blinking after a word, the terminal-style 'waiting for output' signal that streaming AI interfaces have adopted. Uses steps() so the blink is crisp, not a fade.

text · ai · inline · minimal

AI Sparkle Loader

The four-point AI sparkle: a large star breathes and turns a quarter while two small ones twinkle in and out beside it. Inline SVG, so the points stay crisp at any size.

ai · icon · pulse

AI Gradient Orb Loader

A soft orb of blurred color blobs drifting around each other while the whole sphere breathes, like a voice assistant listening. Two blobs are hue-rotated from your accent.

ai · gradient · glow · pulse

Streaming Response Loader

Word-shaped tokens stream in from blur, arriving in bursts like a model writing, and the newest ones flash brighter before settling. Driven by one registered @property.

ai · skeleton · text

AI Agent Steps Loader

A three-step task list for AI agents: a spinner walks down the rows and each step turns into a check as it finishes. Change the labels to your own tool calls.

ai · text · spinner · progress

Neural Network Loader

Three layers of nodes wired together: each layer lights up and sends small pulses along its connections to the next. One SVG, and the pulses are just a moving stroke dash.

ai · dots · shapes

Voice Assistant Loader

A filled circle with five white bars moving like a live voice waveform, while a faint ripple rolls outward. Fits voice input, dictation and any 'listening' state.

ai · bars · pulse · icon

AI Image Generation Loader

A tile of placeholder pixels where a glowing scan line sweeps down and leaves a sharp little landscape behind it, like an image model painting. The picture is pure gradients.

ai · skeleton · gradient

AI Generating Badge Loader

A 'Generating' pill whose border carries two bright arcs chasing around it while a sparkle turns inside. The arcs are a conic gradient spun by a registered @property angle, masked to the border.

ai · gradient · text

Stop Generating Button

The round stop button chat apps show while a reply streams: a rounded square in the middle, gently pulsing, with an arc spinning around the rim. Keeps an aria-label for screen readers.

ai · button · ring

Rotating Status Text Loader

A status pill with a dotted spinner and a word that rolls up through Fetching, Parsing and Rendering. Pure CSS: a word column slides inside a one-line window.

text · ai · inline

Text to Speech Loader

A speaker icon with pulsing sound waves and a sentence whose highlight hops from word to word as it is read aloud. Every word shares one keyframe with a staggered delay.

ai · text · inline

AI Summarizing Loader

A small document with a highlighter sweeping across its lines one at a time, as if the model is reading it, and a sparkle badge in the corner. Two synced animations, one moving down in steps.

ai · skeleton · icon

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.

ai · text · physics · playful

Magic Wand Loader

A wand with a star on its tip waves back and forth while small sparkles pop into the air it just left. A friendly 'working some magic' state for AI rewrite and enhance buttons.

ai · icon · playful

How to use these ai loaders

Open any loader, copy the HTML into your markup and the CSS into your stylesheet. Nothing else is required: no JavaScript, no icon fonts, no image files. Each loader's classes are prefixed with its own name so several can share a page.

To change the color, set --ldr-color on the loader or any ancestor. To change the size, set --ldr-size. Everything inside scales from those two values, so a 16px inline spinner and a 96px page loader are the same snippet.

Every snippet ships with a prefers-reduced-motion rule that slows the animation for people who have asked their OS for less motion. Keep it.