Dev Design LibraryOpen the library

Thinking Indicator Components

Dev Design Library indexes 31 thinking indicator components from 19 open-source UI libraries, with the most coming from Notra, Halaska UI, Kokonut UI, AI CSS and BoardUI. Each one links to its page with the source code, a live preview where available, the library license and the install command. Thinking indicator components belong to the AI group.

Ai Response StatusReact Spectrum · React
Thinking Statestransitions.dev · HTML/CSS
Thinking OrbsLibraries.dev · ReactDotted thought-orb loading indicators for AI & agent UIs — nine tuned states, two sizes, auto dark/light
Streaming reply with a pending stateReUI · ReactOne assistant row moving from thinking, to typing, to settled.
Chat Loading DotsLobe UI · React
AI State LoadingKokonut UI · ReactAgent progress as a list of steps with a live log, elapsed time and a summary when done.
Agent ActivitybeUI · ReactRenders progressive agent work as message content.
Matrix OrbRare UI · ReactA dot-matrix orb that animates through idle, listening and thinking states.
Thinking DotsSpectrum UI · ReactA minimal typing indicator — bouncing dots or a sliding bar.
Thinking IndicatorFluid Functionalism · ReactAnimated loading indicator with morphing SVG path (circle to infinity loop) and shimmer text rotation. Cycles through…
Agent ThinkingBoardUI · ReactAgent thinking indicators for chat composers.
LoaderAI Elements (Svelte) · SvelteA lightweight animated loader with a separate icon component.
ChatGPT ThinkingNotra · ReactThe shimmering Thinking placeholder.
Bars ThemeNexvyn UI · ReactA traveling-wave bars visualization with 5 vertical bars sharing a sine-wave frequency, evenly phase-shifted left to…
Inline LoaderGenerative Loaders · React
OrbAI CSS · React
Agent Status PatternHalaska UI · React
ThinkingSpaceUI · React9 procedural Canvas 3D particle loader orbs representing AI cognitive states — working, searching, solving, listening…
Agent Loading StatesEaseUI · ReactThree loading states for AI interfaces: shimmering status text, live agent progress, and cycling reasoning phrases.
AI Text LoadingKokonut UI · ReactAI thinking text with a soft wave through the letters and words that swap letter by letter.
Composer LoaderBoardUI · ReactOrbiting light band for a working composer.
ShimmerAI Elements (Svelte) · SvelteA text shimmer utility component with configurable spread and duration.
Claude Code ThinkingNotra · ReactThe dim "∴ Thinking…" line that expands to the thoughts.
Text LoaderGenerative Loaders · React
Thinking StateAI CSS · React
Thinking IndicatorHalaska UI · React
Claude ThinkingNotra · ReactThe animated spinner and rotating verb Claude shows before replying.
Codex WorkingNotra · ReactThe shimmering Working (13s • esc to interrupt) status line.
Gemini ThinkingNotra · ReactThe animated Gemini sparkle with a shimmering status label.
OpenCode ActivityNotra · ReactOrange thoughts with a live Thinking spinner, plus muted read, web search and tool lines.
Perplexity ThinkingNotra · ReactThe shimmering Thinking... status shown before a search.

Libraries with thinking indicator components

Related categories