Loader

kai-loader

An animated busy indicator that fits anywhere — buttons, toolbars, empty panels, or standalone skeletons — with twelve visual styles from a single variant attribute.

• Shadow DOM
• 12 variants
• 3 sizes
• Text label support

Preview

When to use

Use <kai-loader> for a “working” indicator outside the chat thread — inside a send button, a toolbar corner, or as a panel placeholder. In SolidJS, use the Loader primitive directly for finer composition control.

Usage

All props are plain HTML attributes — no binding layer required:

<kai-loader variant="dots" size="md"></kai-loader>

• variant — circular for generic waits, wave/bars for audio or processing, text-shimmer for an AI “thinking” state.
• size — sm inside a button, lg as a panel placeholder.
• text — required for text-based variants (text-blink, text-shimmer, loading-dots); e.g. text="Thinking…".

Examples

Default Spinner

The out-of-the-box circular spinner — no attributes needed.

Code

Dots

Three-dot pulse — works well inside buttons or inline next to text.

Code

Wave

Rhythmic wave — great for audio processing or streaming output.

Code

Text Shimmer

Animates a label with a shimmer sweep — ideal for AI “Thinking…” states.

Code

Sizes

Code

Code

Terminal

Retro blinking cursor — a good touch for developer tools or code-generation states.

Code

Props

Property	Type	Default	Notes
variant	LoaderVariant	'circular'	The animation style: `'circular' | 'classic' | 'pulse' | 'pulse-dot' | 'dots' | 'typing' | 'wave' | 'bars' | 'terminal' | 'text-blink' | 'text-shimmer' | 'loading-dots'`. Defaults to `'circular'`.
size	"sm" | "lg" | "md"	'md'	Loader size: `'sm' | 'md' | 'lg'`. Defaults to `'md'`.
text	string	—	Label for the text-based variants.

Composed from

This element wraps these SolidJS components — reach for them directly when you need finer control than the props expose.

Loader

---

Need a hand? Report a bug Ask for help