Skip to main content
Loaders communicate that something is happening — a request in flight, content loading, or a background process running. Three visual variants cover the most common patterns.

​
Basic Usage

​
Variants

​
Dots

Three dots bouncing in sequence — a “typing” or “processing” indicator.

​
Pulse

A pulsing dot — subtle, good for background activity or heartbeat indicators.

​
Bars

Three vertical bars oscillating in sequence — an equalizer-style processing indicator.

​
iOS

A segmented circle with chasing opacity — the classic iOS activity indicator.

​
Sizes

All variants support three sizes.

​
Examples

Pair a loader with text to describe what’s happening. The dots variant works well for “thinking” or “typing” states. Badges accept children, so you can embed a loader directly inside and control the order.

​
API Reference

Loader Parameters

​
variant
str
default:"spin"
Animation style: "spin", "dots", "pulse", "bars", "ios".
​
size
str
default:"default"
Indicator size: "sm", "default", "lg".
​
css_class
str | None
default:"None"
Additional Tailwind CSS classes.

​
Protocol Reference

Loader
{
  "type": "Loader",
  "variant?": "spin | dots | pulse | bars | ios",
  "size?": "sm | default | lg",
  "cssClass?": "string"
}
For the complete protocol schema, see Loader.