Typing Indicator

Core component

<loquix-typing-indicator> communicates that an assistant is producing or preparing a response.

loquix-typing-indicatorstatusaccessible

Preview

All variants Live component

Usage

import '@loquix/core/define/define-typing-indicator';

<loquix-typing-indicator variant="dots"></loquix-typing-indicator>

<loquix-typing-indicator
  variant="steps"
  message="Searching documents…"
></loquix-typing-indicator>

Properties

Property	Attribute	Type	Default	Description
variant	variant	'dots' | 'text' | 'steps'	'dots'	Visual form of the status.
message	message	string	localized text	Optional message for text and steps.

Choosing a variant

Variant	Use when
dots	The delay is brief and no explanation is necessary.
text	A simple human-readable status adds clarity.
steps	The assistant is performing a named stage of longer work.

Accessibility

The component renders a live status surface. The dots variant supplies a localized accessible label, while text variants expose their visible message.

CSS parts

Part	Purpose
container	Outer status wrapper.
dot	Each animated dot in the dots variant.

A compact brand treatment

loquix-typing-indicator {
  --loquix-typing-dot-size: 5px;
  --loquix-typing-dot-color: #5b43e6;
}

loquix-typing-indicator::part(container) {
  border-radius: 999px;
}

CSS custom properties

Variable	Purpose
--loquix-typing-bg	Indicator background.
--loquix-typing-text-color	Color for text and steps variants.
--loquix-typing-dot-size	Diameter of each dot. Defaults to 6px.
--loquix-typing-dot-color	Dot color.