184 Components
AI Thinking Loader
MotionPhysics-grade animated loading indicator that communicates AI processing states. Three spring-animated orbs in dots, wave, or ring variants — far richer than plain CSS keyframe spinners.
Processing reasoning tokens…AI is thinking…
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:framer-motionclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/ai-thinking-loader.json"
Props
TypeScript props supported by <AIThinkingLoader />.
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "dots" | "wave" | "ring" | "dots" | Animation style variant. |
| size | number | 8 | Orb diameter in pixels. |
| label | string | "AI is thinking…" | Accessible status label. |
Key Features
- Three variants: dots (scale pulse), wave (vertical oscillation), ring (arc spinner).
- Staggered spring physics per dot for natural organic feel.
- prefers-reduced-motion: static rendering.
- Fully accessible with role=status and aria-label.
- Configurable dot size and custom aria label.
Keyboard & Accessibility
- role='status' + aria-label for screen reader announcement.
- Static rendering when reduced motion is preferred.