AI Chat Fancy Stable
TypingIndicator
Animated three-dot presence indicator with a staggered CSS wave, tuned to signal activity without pulling focus
Preview
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>Installation
pnpm add fancy-ui-svelte
import { TypingIndicator } from 'fancy-ui-svelte'
Usage
svelte
<script lang="ts">
import { TypingIndicator } from 'fancy-ui-svelte';
</script>
<TypingIndicator />Examples
Basic Usage
svelte
<script lang="ts">
import { TypingIndicator } from "$lib/fancy-ui/typing-indicator";
</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>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 |
Links
Related components
Ch
ChatError
Quiet inline failure banner for a chat turn: the error, an optional detail line, and a retry button that disables itself while the retry is in flight
AI Chat Stable
Ch
ChatMessage
One conversation turn, aligned and dressed by its role, streaming its body while the answer arrives, with an action rail that fades in on hover and a version navigator underneath
AI Chat Stable
Ch
ChatPanel
The shell a conversation lives in: a sticky header, a transcript that pins itself to the bottom while an answer arrives and offers the way back once you scroll up, and a sticky composer row
AI Chat Stable