kai-thinking-bar
Tells the reader a response is coming, and lets them interrupt instead of waiting.
- Shadow DOM
- Animated shimmer
- Optional stop affordance
- 1 event
- Fully attribute-driven
Preview
Section titled “Preview”<kai-thinking-bar text="Thinking" stoppable stop-label="Answer now"></kai-thinking-bar>All three props are attributes — no JavaScript needed.
stoppable— bare boolean attribute; shows the stop button.kai-stop— fires with no payload when the stop button is clicked; cancel the in-flight request in your handler.
Examples
Section titled “Examples”Default
Section titled “Default”Remove the element from the DOM once the assistant reply arrives.
Custom Label
Section titled “Custom Label”Stoppable
Section titled “Stoppable”Custom Stop Label
Section titled “Custom Stop Label”| Property | Type | Default | Notes |
|---|---|---|---|
| theme | "light" | "dark" | "auto" | 'auto' | Color mode (`auto` follows prefers-color-scheme). |
| text | string | 'Thinking' | The shimmering label, e.g. "Thinking…". |
| stoppable | boolean | false | When true, show a "stop" affordance that fires a `stop` event. |
| stopLabel | string | 'Answer now' | Label for the stop affordance. |
Events
Section titled “Events”| Event | Detail | Notes |
|---|---|---|
| kai-stop | — | The "stop / answer now" affordance was clicked. |
Composed from
Section titled “Composed from”This element wraps these SolidJS components — reach for them directly when you need finer control than the props expose.
ThinkingBar