You Might Also Like
Learn Coding Visually
Learn to code with interactive, live-preview playgrounds — HTML, CSS, JavaScript, React & more.
HTML Playground42 lessons · Click-based · Live preview
CSS PlaygroundLearn CSS with a live editor
JavaScript Playground60 lessons · DOM · Async · Canvas
React PlaygroundLearn React with a live code editor
GSAP PlaygroundLearn GSAP animation interactively
SVG Playground44 lessons · shapes · paths · animation
SCSS Playground45 lessons · Sass modules · tokens
Tailwind PlaygroundLearn Tailwind CSS with a live editor
Bootstrap 5 Playground50 lessons · live previewAI Thinking Loader — Free HTML CSS JS Chat Loading Snippet
AI Thinking Loader · Loaders · Plain HTML, CSS & JS · Live preview
What's included
Features
About this UI Snippet
AI Thinking Loader — A Chat Loading State That Feels Alive
The AI thinking loader is the loading state that has become standard in chat and assistant interfaces: a gradient orb spins, a shimmering "Thinking…" label cycles through status phrases, and a skeleton of shimmer bars hints at the response forming. This snippet builds the whole thing with plain HTML, CSS, and a small vanilla JavaScript phrase cycler — a far more engaging wait than a bare spinner.
The spinning gradient orb
The orb is a circle filled with a four-color conic-gradient that rotates via the alSpin keyframe, with an ::after pseudo-element inset by 4px and filled with the bubble background — turning the solid disc into a glowing ring. This is the classic "AI is working" emblem: a rainbow ring spinning beside the message. It is pure CSS and costs only one rotating element.
Shimmering status text
The status label uses the same clipped-gradient shimmer technique as polished "shiny text": the text is transparent and filled with a gradient that is mostly muted gray with a bright band, animated across the letters so a sheen sweeps through the word. That motion makes the status feel active — the assistant is not just stuck on a static label, it is visibly working. The shimmer is pure CSS via background-clip: text.
Cycling status phrases
Real assistants reassure users by narrating progress, so JavaScript rotates the label through phrases like "Reading context…", "Drafting a response…", and "Checking facts…" on an interval. Each change fades the label out and back in (a quick opacity transition) so the phrases swap smoothly rather than snapping. Communicating steps, even simulated ones, makes a wait feel shorter and more trustworthy than a single unchanging word.
The shimmer skeleton
Below the status, three skeleton bars of decreasing width preview the shape of the incoming answer. Each bar has a moving gradient (alWave) that sweeps a lighter band across it, with staggered animation-delays so the shimmer ripples down the lines. This is the standard content-placeholder technique, here signaling that text is about to stream in — pairing the orb (it is thinking) with the skeleton (a response is coming).
Three coordinated motions, all CSS
The orb spin, the text shimmer, and the skeleton wave are independent CSS animations running together, which is what makes the loader feel rich without any animation library. JavaScript only handles the discrete job of swapping phrases, keeping the per-frame work entirely on the compositor.
Customizing it
Edit the PHRASES array to match your assistant voice, recolor the orb gradient and the shimmer band, change the number and widths of skeleton bars, or retime any of the loops. Drop it into a chat thread as the assistant message placeholder, then replace it with the real streamed response when it arrives. Pair it with an ai chat interface or a typing indicator for a complete conversation UI.
Build with AI
Build, Understand, Optimize, and Extend It With AI
You don't have to work through the three overlapping animations by hand — paste this snippet's HTML, CSS, and JS into an AI coding assistant like Claude and ask it to explain exactly how the shimmering status text achieves its sheen using background-clip: text with a moving gradient, and how that differs mechanically from the skeleton bars' own wave animation. The same assistant is useful for optimizing it — asking whether the phrase-cycling setInterval and its nested setTimeout for the fade could leak if the loader is removed from the DOM mid-cycle, and how to clean that up properly. It's just as good for extending it: ask it to sync the phrase list to real backend progress events instead of a fixed timer, add a subtle progress percentage to the orb, or make the skeleton bar count and widths configurable via a data attribute. Treat the code less like a finished artifact and more like a starting point for a conversation.
Prompt to recreate it
Copy this into your AI assistant of choice to build the effect from scratch, or as a jumping-off point for your own variant:
Build an "AI thinking loader" chat placeholder in plain HTML, CSS, and JavaScript — no libraries, combining three independent CSS animations plus one small JS interval.
Requirements:
- A chat-bubble-shaped container holding a small circular "orb" on the left and a status column on the right.
- The orb must be filled with a multi-color conic-gradient and continuously rotated with a linear infinite CSS keyframe, with an inset pseudo-element filled in the bubble's background color so the solid disc reads as a glowing ring rather than a filled circle.
- The status text ("Thinking…" etc.) must have a shimmering sheen effect achieved purely in CSS: make the text transparent, fill it with a wide linear-gradient that is mostly a muted color with one bright band, size the background larger than the element, and animate the background-position across an infinite loop so the bright band sweeps through the letters.
- Below the status text, render three skeleton placeholder bars of decreasing width (to preview an incoming multi-line answer), each with its own shimmer: a moving gradient animated via background-position, with staggered animation-delay values so the shimmer ripples down the bars rather than moving in lockstep.
- In JavaScript, cycle the status text through an array of realistic progress phrases (e.g. "Reading context…", "Drafting a response…") on a timer of a couple of seconds, fading the text out via opacity, swapping the textContent, then fading it back in — not an abrupt text swap.
- Keep all continuous motion (the orb spin, the text shimmer, the skeleton wave) as pure CSS keyframe animations so only the discrete phrase-swapping logic touches JavaScript, keeping per-frame work off the main thread.Want to tighten it up first? Run this prompt through the AI Prompt Studio to score it across 8 quality dimensions, catch anti-patterns, and tune the wording for Claude, ChatGPT, or Gemini before you paste it in.
Step by step
How to Use
- 1Paste HTML, CSS, and JSA chat bubble shows a spinning orb and a shimmering status.
- 2Watch the orbA rainbow gradient ring spins beside the text.
- 3Read the statusThe shimmering label cycles through progress phrases.
- 4See the skeletonShimmer bars ripple to preview the incoming answer.
- 5Edit the phrasesChange the PHRASES array to your assistant voice.
- 6Swap in the responseReplace the loader with the streamed reply.
Real-world uses
Common Use Cases
Got questions?
Frequently Asked Questions
The orb is a circle filled with a four-color conic-gradient that rotates on a keyframe, with an ::after pseudo-element inset by 4px and filled with the bubble background. That turns the solid disc into a glowing rainbow ring, the familiar AI-working emblem, using just one rotating element in pure CSS.
The label is transparent and filled with a gradient via background-clip: text — mostly muted gray with a bright band — animated across the letters so a sheen sweeps through the word. The motion makes the status feel active and working rather than a static stuck label, and it is entirely CSS.
Narrating progress reassures users and makes a wait feel shorter. JavaScript rotates the label through phrases like Reading context and Drafting a response on an interval, fading each out and back in so they swap smoothly. Even simulated steps feel more trustworthy than a single unchanging word.
Three bars of decreasing width with a moving shimmer gradient and staggered delays preview the shape of the incoming answer. Combined with the spinning orb, it pairs the message that the assistant is thinking with the message that a response is about to stream in, which sets the right expectation during the wait.
Render it as a chat message placeholder component and keep the phrase index in state, updating it on an interval set up in a mount effect with cleanup. The orb, shimmer, and skeleton are pure CSS. Swap the component for the real response when streaming begins. In Tailwind, define the spin, shine, and wave keyframes in the config and apply them with utilities.