Live preview

Interactive example

Conversation status

Preparing your answer

A quiet indicator for messages and background activity.

Usage

Import the component, then make it your own.

ComponentTypingDots

svelte

<script>
  // Import the shared stylesheet once in your application's root layout.
  import "sveltekit-ui/style.css"
  import { TypingDots } from "sveltekit-ui"
</script>

<p role="status">Preparing your answer <TypingDots color="var(--primary-t)" /></p>

API reference

Props accepted by the component.

1 entry in properties

PropertyTypeDefaultDescription
colorstring var(--g8-t)The color of the dots in the typing animation.