Thinking Orbs Loading Indicators
Adds accessible animated AI activity indicators to React interfaces.
- Repository
- MengTo/Skills
- Stars
- 7,187
- Licence
- MIT
- Files
- 3 files
What it does
When installed, the agent knows how to add a small animated orb to a React app to show that an AI feature is busy, such as searching, reasoning, writing, or listening. It picks the matching visual state, chooses a size and theme, handles reduced-motion and pause behavior, and keeps screen-reader announcements clean, instead of dropping in a generic spinner. Skills are instruction folders that teach an AI agent a specific capability.
Great for
- React or Next.js developers building chat, copilot, or AI search interfaces
- Designers and front-end engineers who want accessible, on-brand AI loading states
- Teams replacing generic spinners with status feedback that matches the real product lifecycle
Skip it if
- Projects that need determinate progress bars or percentage completion, since the orb only shows indeterminate activity by design
- Non-React stacks, because the library is a React component package
- Apps that need custom colours or arbitrary sizes, since the library only offers monochrome dots and two fixed presets
Try asking
- “Add a thinking orb to my chat composer that shows when the assistant is writing a reply”
- “Replace the spinner on our search results page with an accessible searching orb”
- “Show a listening orb while the microphone is capturing speech, and remove it when the turn ends”
- “Make the orb respect reduced motion and dark mode in our Next.js app”
Install in 3 steps
- 1
Download the skill
The ZIP contains the 3 original files, the MIT licence and an attribution note.
thinking-orbs.zip - 2
Add it to your agent
Claude Code (all projects)
mkdir -p ~/.claude/skills && unzip thinking-orbs.zip -d ~/.claude/skills/Claude Code / Agent SDK (this project only)
mkdir -p .claude/skills && unzip thinking-orbs.zip -d .claude/skills/Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.
- 3
Ask for the task
No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.
Get better results
- Map your real product phases to the six orb states and remove the orb when activity ends, rather than leaving it running.
- Pair the orb with visible status text and let one live region announce it to avoid duplicate screen-reader output.
- Use the built-in theme and pause props instead of rebuilding animation loops in wrapper code.
What's inside
- agents/openai.yaml
- REFERENCES.md
- SKILL.md
Redistributed unmodified from MengTo/Skills under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.