# TypingIndicator

> Animated three-dot presence indicator with a staggered CSS wave, tuned to signal activity without pulling focus.

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

## Import

```svelte
<script lang="ts">
  import { TypingIndicator } 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 { TypingIndicator } from 'fancy-ui-react';` (same prop names; `class` becomes `className`, snippets become `ReactNode`).

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `size` | `number` | `6` | Dot diameter in pixels |
| `color` | `string` | `"var(--ft-typing-color, currentColor)"` | Dot color; any CSS color or custom property expression |
| `speed` | `number` | `1.2` | Duration of one full animation cycle in seconds |
| `label` | `string` | `"Typing"` | Visually hidden text announced to assistive technology |

## Examples

### Basic Usage

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

<div class="flex w-full flex-col items-start gap-8 p-6">
	<div class="flex w-full max-w-md flex-col gap-2">
		<div class="bg-primary text-primary-foreground ml-auto rounded-2xl rounded-br-sm px-4 py-2.5">
			<p class="text-sm">Can you summarize the release notes?</p>
		</div>
		<div class="bg-muted text-muted-foreground mr-auto rounded-2xl rounded-bl-sm px-4 py-3.5">
			<TypingIndicator label="Assistant is typing" />
		</div>
	</div>

	<div class="flex items-center gap-3">
		<TypingIndicator size={10} speed={1.6} class="text-muted-foreground" />
		<span class="text-muted-foreground text-sm">Larger and slower, on its own</span>
	</div>
</div>
```