AI Agents Fancy Stable
ThinkingIndicator
Live agent status line with a shimmering activity label and an elapsed timer, as a bare inline row or a bordered status pill
Preview
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>Installation
pnpm add fancy-ui-svelte
import { ThinkingIndicator } from 'fancy-ui-svelte'
Usage
svelte
<script lang="ts">
import { ThinkingIndicator } from 'fancy-ui-svelte';
</script>
<ThinkingIndicator />Examples
Basic Usage
svelte
<script lang="ts">
import { ThinkingIndicator } from "$lib/fancy-ui/thinking-indicator";
// 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>Props
| Prop | Type | Default | Description |
|---|---|---|---|
status * | 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 |
Slots
| Slot | Description |
|---|---|
done | Rendered instead of the status label once running is false |
Links
Related components
Ag
AgentPlan
Glanceable checklist of an agent's plan: a done/total count and completion bar over one row per step, with a status glyph, an optional detail line, and substeps indented under a rail
AI Agents Stable
Ai
AiDataTable
Compact comparison table for a model's structured answer: real table semantics, tabular numeric columns, check-or-dash booleans, and one tintable column — rendered in the order it arrived, with no sorting
AI Agents Stable
Ap
ApprovalCard
A human-in-the-loop gate before a side effect: the agent states what it is about to do, and the footer swaps its approve and deny buttons for a one-line verdict once someone decides
AI Agents Stable