# ThinkingIndicator

> Live agent status line with a shimmering activity label and an elapsed timer, as a bare inline row or a bordered status pill.

- Package: `fancy-ui-svelte` (Svelte 5 + Tailwind CSS v4)
- Category: AI Agents
- Tags: ai, agents, reasoning, status, indicator
- Docs: https://fancy-ui.rama.app/docs/components/thinking-indicator
- Source: https://github.com/RamaHerbin/fancy-ui/tree/main/src/lib/fancy-ui/thinking-indicator

## Import

```svelte
<script lang="ts">
  import { ThinkingIndicator } from 'fancy-ui-svelte';
</script>
```

Setup (once per project): `npm install fancy-ui-svelte`, then add `@import "fancy-ui-svelte/tailwind.css";` after `@import "tailwindcss";` in your main CSS file. Full guide: https://fancy-ui.rama.app/llms.txt

React: `import { ThinkingIndicator } from 'fancy-ui-react';` (same prop names; `class` becomes `className`, snippets become `ReactNode`).

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `status` (required) | `string` | — | What the agent is doing right now, e.g. "Reading files" |
| `running` | `boolean` | `true` | Whether the activity is in flight: drives the shimmer and the live timer |
| `variant` | `"inline" \| "pill"` | `"inline"` | Bare text row, or a bordered chip with a leading pulse dot |
| `since` | `number` | — | Epoch ms the activity started; the internal stopwatch ticks from it |
| `elapsedMs` | `number` | — | Externally-driven elapsed time in ms; overrides the internal stopwatch |
| `showElapsed` | `boolean` | `true` | Show the elapsed duration alongside the status |

## Snippets

| Snippet | Description |
| --- | --- |
| `done` | Rendered instead of the status label once running is false |

## Examples

### Basic Usage

```svelte
<script lang="ts">
	import { ThinkingIndicator } from "fancy-ui-svelte";

	// Both live rows started when this example mounted, so their timers climb
	// from zero while you read the page.
	const startedAt = Date.now();
</script>

<div class="flex w-full flex-col items-start gap-6">
	<ThinkingIndicator status="Reading files" since={startedAt} />

	<ThinkingIndicator variant="pill" status="Searching the web" since={startedAt - 8000} />

	<!-- Finished: the shimmer stops and the `done` snippet takes over the label. -->
	<ThinkingIndicator status="Reading files" running={false} showElapsed={false}>
		{#snippet done()}
			Thought for 12s
		{/snippet}
	</ThinkingIndicator>
</div>
```