Guides · · Maxwell Prehoda
12 AI Thinking Animations: How Claude, ChatGPT, Gemini and Siri Show a Model at Work (With CSS)
An AI thinking animation tells the user that a model is working before any answer text exists. The pattern has settled into three parts across the big assistants: a live label (often a shimmering "Thinking" with a timer), a collapsible view of the reasoning or its summary, and a streaming answer that takes over once the model starts writing.
Below are 12 examples: how Claude, Claude Code, ChatGPT, Gemini and Siri present it, the open-source components most teams build with (Vercel's AI Elements, MUI X Chat, community shadcn blocks), and three of ours. Every one comes with a pure-CSS demo you can copy, and the last section shows the CSS behind the shimmer that nearly all of them use.
1. Claude's Thinking indicator and expandable thoughts: Best for chat apps that show reasoning without forcing it on you
Platform: claude.ai web, desktop and mobile apps
Two requests can both read count = 4 before either one writes, so the limit check passes twice. A lock would work, but a conditional UPDATE is simpler.
Move the check into the UPDATE itself, so the database settles the race:
Claude's help center describes exactly what you see when thinking is on: "A 'Thinking' indicator with a timer showing how long Claude has been processing" and "An expandable 'Thinking' section above Claude's response." Click the section and you get a summary of the thought process and problem-solving approach.
The timer is the detail worth copying. A plain spinner says nothing about how long a wait has lasted; a counting timer makes a 40-second reasoning pass feel deliberate rather than stuck. Collapsing the thoughts by default keeps the answer front and centre for people who do not care how it got there.
Our Thought For Disclosure below is a pure-CSS version of the same idea: a collapsed "Thought for 12s" row whose chevron turns as the reasoning panel opens and the muted thoughts blur in.
Watch out for: A live timer that updates every second is noisy for screen readers. Put it in an element that is not a live region, and announce only the start and the end.
2. Claude Code's terminal spinner: Best for CLI tools and coding agents in a terminal
Platform: Claude Code (terminal, VS Code, JetBrains, desktop)
> fix the flaky auth test
Percolating…
In a terminal there is no CSS, only characters, so Claude Code shows its working state as a spinner line while Claude works. The docs note that Claude Code also shows a one-line tip under the spinner, which you can turn off with the `spinnerTipsEnabled` setting.
It proves how little you need: one line, one moving glyph and a few words of status. Our Terminal Thinking Status Line below is a pure-CSS tribute to the terminal style: a dingbat star cycling through frames, a brighter wave running through the word, and an elapsed seconds counter driven by a registered integer custom property.
Watch out for: Terminal spinners redraw the same line. If your tool also runs in CI, detect a non-interactive terminal and print plain status lines instead of animation frames.
3. ChatGPT's Thinking mode: Best for products that show a reasoning summary, not raw thoughts
Platform: ChatGPT apps; OpenAI API reasoning summaries
Since the o1 models in 2024, OpenAI has kept the raw chain of thought hidden and shown a model-written summary of the reasoning instead. Its API documentation says the same for developers: "we don't expose the raw reasoning tokens emitted by the model," but you can request a summary with the `summary` parameter, set to `auto`, `detailed` or `concise` depending on the model.
That shapes the animation. When what you show is a summary that arrives in pieces, the natural UI is a collapsed status line whose text changes as each new summary phrase lands, rather than a scrolling wall of thoughts.
Our Thinking Summary Ticker below is a pure-CSS version of that pattern: a collapsed thinking pill whose one-line summary changes as the model works, each phrase rising out of a blur.
Watch out for: If you build on reasoning summaries, design for gaps: summaries can arrive in uneven bursts, so the ticker needs a calm idle state between phrases, not a frantic loop.
4. Gemini's Show thinking: Best for showing reasoning steps live as they stream
Platform: Gemini web and mobile apps
- Reading the stack trace
- refresh() fires twice on window focus
- Both calls race for the same token
- Share one in-flight promise instead
When Gemini 2.0 Flash Thinking reached the Gemini app in February 2025, 9to5Google described the desktop display: it starts with a "Show thinking" step, followed by the model's listed steps, and the reasoning streams in real time, faster than most people can read. A chevron hides it. On mobile the display is simpler, a "Thoughts" section before the response.
Listing steps as discrete rows is the useful idea. A row per step lets the eye track where the model is, even when the text is moving too fast to read.
Our Reasoning Trace below is a pure-CSS version of a step list: reasoning steps blur in one after another down a hairline thread, with the current step kept bright.
Watch out for: Streaming text faster than people can read is fine inside a collapsed panel, but never auto-scroll the page to follow it. Let the user choose to watch.
5. Siri's edge glow in Apple Intelligence: Best for voice and system-level assistants
Platform: iOS, iPadOS and macOS
Set a timer for 12 minutes
Apple's June 2024 announcement put it in one sentence: "Siri also has a brand-new design with an elegant glowing light that wraps around the edge of the screen when Siri is active." No label, no dots. The whole screen frame becomes the indicator.
It works because a voice assistant has no text to anchor a spinner to, and because the glow sits on top of whatever app you are in without covering it. For a web product, the same idea works as a glowing border around an input or a panel while an AI action runs.
Our Siri Edge Glow below is a pure-CSS version of the effect: a phone frame whose edges light up with a multicolour glow that circles the frame and bleeds softly inward.
Watch out for: Large blurred glows are among the more expensive things to animate. Animate a rotating gradient under a mask rather than animating blur radius, and drop it under reduced motion.
6. Vercel AI Elements: Reasoning and Shimmer: Best for Next.js and React chat apps on the AI SDK
Platform: React + Tailwind (shadcn-style), Framer Motion for Shimmer
AI Elements is Vercel's component set for AI interfaces. Its Reasoning component is a collapsible panel that opens automatically while content streams and closes when streaming finishes, with a pulsing streaming indicator and a `duration` prop for the seconds spent thinking. Its Shimmer component sweeps light across text: a CSS gradient on transparent text through `background-clip`, animated with Framer Motion, with a 2-second default `duration` and a `spread` that scales with text length.
Together they are the shortest route to the now-standard look in a React app. Our AI Thinking Shimmer Text below is a pure-CSS alternative to the Shimmer if you do not want Framer Motion for one label: the same gradient and background-clip trick, moved by a single 1.6s linear keyframe.
Watch out for: Auto-opening a panel while it streams and auto-closing it at the end moves the layout twice. Reserve space or animate height smoothly, or the answer jumps when the panel snaps shut.
7. MUI X Chat's reasoning display: Best for Material UI apps adding an assistant
Platform: React, MUI X Chat (marked Preview)
MUI's take is deliberately plain: a native details and summary disclosure that stays open while the reasoning part is streaming, labelled "Thinking…", then collapses to a "Reasoning" summary once done. The message part has a `state` of `streaming` or `done`, and both labels can be changed through `localeText`.
Building on native disclosure means keyboard and screen-reader support come for free, which many custom thinking panels get wrong. Add a shimmer to the label and you have the full pattern. Our Thinking Shimmer Label below is a pure-CSS label you could drop into that summary: a soft band of light through the letters while a four-point sparkle turns.
Watch out for: MUI marks Chat as a Preview feature, so expect API changes before you rely on it in production.
8. Thinking Reasoning block on 21st.dev: Best for shadcn projects wanting a ready Thought for Ns block
Platform: Community component, MIT, installs via shadcn
This community component by Kevin, part of his AIcss library, packages the whole flow into one block: the label shimmers, expanding it streams the agent's reasoning, and when done it collapses into a "Thought for Ns" summary. It is MIT licensed and installs through the shadcn CLI.
It is a good reference for the end state most teams are aiming at: shimmer while working, readable while open, a compact receipt when finished. Our Starburst Thinking below is a pure-CSS alternative if you want a mark rather than a label: an eight-ray starburst whose rays stretch and settle in a wave around the circle.
Watch out for: Installing from 21st.dev uses its registry and an API key, so check the generated code into your repo rather than depending on the registry at build time.
9. Streaming answers with the AI SDK: Best for the moment thinking ends and the answer begins
Platform: Vercel AI SDK (TypeScript)
Yes. Runes replace stores for local state in Svelte 5, but keep a store when several components need to share one value.
Thinking animations exist to bridge a gap, and streaming is how you shrink that gap. The AI SDK docs put the problem bluntly: without streaming, users can end up "staring at loading spinners for 5, 10, even up to 40s waiting for the entire LLM response." Streaming displays parts of the response as they become available.
So the best thinking animation hands off quickly to a well-animated stream. Words that fade in with a soft caret read as writing; text that pops in raw chunks reads as glitching. Our Soft Caret Stream below is a pure-CSS version: a reply that streams in word by word in uneven bursts, each word fading up from a blur behind a soft glowing caret.
Watch out for: Animating every incoming token with its own keyframe is fine for a demo but adds up in long answers. Animate only the newest few words and let the rest sit still.
10. Our AI Animations directory: Best for agent states beyond thinking: tools, plans, approvals
Platform: Motions directory, free Ours
npm test
Running 42 tests
42 passed, 0 failed
Thinking is only the first state an agent UI needs. The AI Animations directory covers the rest as plain HTML and CSS: tool calls, web search with source chips, reading files, plan checklists, permission prompts, diffs, rate-limit countdowns, voice orbs and image generation. Each has two custom properties for colour and size and a prefers-reduced-motion guard written in.
The Agent Tool Call below is the most-needed one after thinking: a tool call card reading Bash npm test, with a live dot pinging while a timer counts up, then a check that pops in when it finishes.
Watch out for: Each state is a separate snippet. Decide your state machine first (thinking, tool use, streaming, done, error) and give each state one animation, or the interface turns into a light show.
11. Our AI Loaders collection: Best for a tiny inline thinking indicator next to a label
Platform: Motions directory, free Ours
The AI Loaders collection is the small end of the range: shimmer text, blinking cursors, sparkles, gradient orbs, rotating status words and stop-generating buttons, sized to sit inline in a chat bubble or a toolbar.
The AI Thinking Hop below shows how much character fits in a few lines of CSS: a small rounded square hops beside the word Thinking, squashing on landing and stretching on takeoff.
Watch out for: Playful indicators wear thin on long waits. Use a bouncy one for sub-ten-second waits and a calmer shimmer with a timer for long reasoning runs.
12. Our Skeleton Morphing Into Text: Best for handing off from waiting to the streamed answer
Platform: Motions directory, free Ours
Cold starts come from the 140 MB image.
Move the model weights to a volume and
boot drops to about 900 ms.
The awkward moment in most AI UIs is the switch from the thinking indicator to the first line of the answer: one disappears, the other pops in, and the layout jumps. Our Skeleton Morphing Into Text handles that switch. Shimmering skeleton bars, each already the width of its line, flatten toward the baseline as the real reply arrives in their place.
Use it when you can predict roughly how long the first paragraph will be, such as summaries or fixed-format answers. For layouts that are known in advance, our skeleton screen examples go further.
Watch out for: Line widths are a guess. If the real answer is much shorter than the skeleton, collapse the extra lines rather than leaving empty grey bars behind.
How to choose an AI thinking animation
Most of these share one CSS technique, so the real choice is what you show and for how long.
Match it to the wait
Short waits (a second or two before streaming starts) need only a small inline indicator: a shimmer label or a hop from the AI Loaders collection. Reasoning runs that last tens of seconds need what Claude and AI Elements do: a label with a timer and a collapsible panel, so the user knows it is working and can look inside. Agent runs that take minutes need named steps, like Gemini's step list or our Agent Plan Checklist, so progress is visible.
Match it to what you can show
If your model returns raw reasoning, a collapsible panel that streams it (MUI X Chat, AI Elements Reasoning) is honest and useful. If you only get summaries, as with OpenAI's reasoning models, show a ticker of summary phrases. If you show nothing but a state, as Siri does, make the indicator ambient: an edge glow or orb, not a fake progress bar. Never animate fake reasoning text; users read it, and it erodes trust when it does not match the answer.
Match it to your stack
On the AI SDK, start with AI Elements. On MUI, use X Chat's built-in disclosure. For everything else, or to avoid adding Framer Motion for one label, use CSS: a linear-gradient background, background-size 200%, background-clip: text, transparent text colour, and a keyframe moving background-position. That is the whole shimmer, and our AI Thinking Shimmer Text does it in about 15 lines of CSS. If you want a GPU version, our Shaders directory has WebGL thinking animations driven by tokens per second. For chat-specific motion beyond thinking, see our chatbot UI animation examples.
Give your model a better thinking state today
List the states your AI feature actually goes through: waiting for the first token, reasoning, using a tool, streaming, done, failed. Pick one animation per state, keep them in one visual language, and make sure each one stops under reduced motion.
If you want one shaped to your product, describe it in the creator or paste your chat component. You get CSS keyframes for each state, ready to wire to your stream events.
Make an AI thinking indicator for a chat message bubble. Show the word Thinking with a light band sweeping through the letters every 1.6s, linear, using background-clip: text. Add an elapsed seconds counter after it in a muted colour. When streaming starts, fade the label out over 200ms ease-out as the first line of text fades up. Use role="status" on the label, and under prefers-reduced-motion show static text with no sweep.
Common questions
How do I make an AI thinking animation in CSS?
Use a shimmer on the text. Give the label a linear-gradient background that is faint at both ends and bright in the middle, set background-size: 200% 100%, background-clip: text and color: transparent, then animate background-position from 100% to -100% on a linear loop of about 1.5 to 2 seconds. Our AI Thinking Shimmer Text is a copyable example.
What is the shimmer effect on ChatGPT and Claude's thinking text?
It is a moving highlight across the letters of a status label. The common way to build it is a gradient clipped to the text and moved with an animation; Vercel's AI Elements Shimmer component, for example, documents exactly that approach with background-clip and Framer Motion.
Should an AI app show the model's reasoning?
Show something, but keep it collapsed by default. Claude and Gemini show reasoning in an expandable section, and OpenAI shows summaries rather than raw chain of thought. A timer or step list tells users the model is working without pushing the reasoning into the answer.
Is a typing indicator the same as a thinking animation?
Not quite. Three bouncing dots come from human chat, where they mean someone is typing. Thinking animations cover a model working before any text exists, often for much longer, so they usually add a label, a timer or steps. Once text streams, the streaming animation replaces both.
How do I make an AI thinking animation accessible?
Put the label in an element with role="status" so its change is announced once, keep the text real and selectable rather than drawn, avoid announcing a ticking timer, and stop the shimmer under prefers-reduced-motion. Every snippet in our AI Animations directory ships with a reduced-motion guard.
Sources
- Claude Help Center: Using extended thinking
- Claude Code docs: Settings
- OpenAI API docs: Reasoning models
- 9to5Google: Gemini 2.0 Flash Thinking rolling out to Gemini app (Feb 2025)
- Apple Newsroom: Introducing Apple Intelligence (June 2024)
- AI Elements: Reasoning
- AI Elements: Shimmer
- MUI X Chat: Reasoning
- AI SDK: Streaming
- 21st.dev: Thinking Reasoning