# Thinking Bar

An animated "thinking" indicator with an optional stop affordance — drop it in when the assistant is reasoning and let users interrupt if they want an answer sooner.

<p class="kai-tag-sub">kai-thinking-bar</p>

A shimmering "thinking" indicator that signals the assistant is still reasoning. Add `stoppable` and it gains a stop button that fires `kai-stop` so users can skip to an answer.

## Preview

> **tip:** 
Place `<kai-thinking-bar>` in the message thread while the assistant is generating a response — it sits naturally above the streaming reply. Enable `stoppable` whenever users should be able to cut a long reasoning step short; handle `kai-stop` to cancel the in-flight request and prompt the model to answer with what it has.

## Usage

```html
<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

### Default

Remove the element from the DOM once the assistant reply arrives.

### Custom Label

Override `text` for a specific task like web search or code analysis.

### Stoppable

### Custom Stop Label

## Props

## Events

## Composed from