Skip to content
Get packs

Thinking Orbs Loading Indicators

Adds accessible animated AI activity indicators to React interfaces.

Source Download skill
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”
Step-by-step guide: how to use Thinking Orbs Loading IndicatorsInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 3 original files, the MIT licence and an attribution note.

    thinking-orbs.zip
  2. 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. 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.