Thinking Bar
A component for displaying AI thinking state with animated shimmer text and optional stop button
Installation
Copy and paste the following code into your project.
Examples
Basic thinking bar
Thinking
With stop button
Add a stop button using the onStop callback. Customize the button label with stopLabel.
Analyzing your question
Component API
ThinkingBar
ThinkingBar
| Prop | Type | Default | Description |
|---|---|---|---|
text | string | "Thinking" | Text to display with shimmer effect |
onStop | () => void | - | Callback when stop button is clicked |
stopLabel | string | "Answer now" | Label for the stop button |
onclick | () => void | - | Callback when thinking text is clicked (shows chevron when set) |
className | string | - | Additional CSS classes |
...props | HTMLAttributes<HTMLDivElement> | - | All other div props are supported |