Loader
Twelve loading-state variants for AI chat: spinners, dots, bars, terminal cursor, and animated text.
Examples
All variants
Same component, different variant input.
Loading
>
Thinking
Thinking
Thinking ...
<pk-loader variant="circular" />
<pk-loader variant="classic" />
<pk-loader variant="pulse" />
<pk-loader variant="pulse-dot" />
<pk-loader variant="dots" />
<pk-loader variant="typing" />
<pk-loader variant="wave" />
<pk-loader variant="bars" />
<pk-loader variant="terminal" />
<pk-loader variant="text-blink" text="Thinking" />
<pk-loader variant="text-shimmer" text="Thinking" />
<pk-loader variant="loading-dots" text="Thinking" />Sizes
Pass size='sm' | 'md' | 'lg' for variants that have a fixed footprint.
<pk-loader variant="dots" size="sm" />
<pk-loader variant="dots" size="md" />
<pk-loader variant="dots" size="lg" />Installation
Add the loader component (and the cn() utility) to your project.
ng generate ngx-prompt-kit:loaderComponent API
PkLoader
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | LoaderVariant | "circular" | circular | classic | pulse | pulse-dot | dots | typing | wave | bars | terminal | text-blink | text-shimmer | loading-dots |
| size | "sm" | "md" | "lg" | "md" | Visual size for variants with a fixed footprint. |
| text | string | "Thinking" | Label for text-* variants. |
| class | string | — | Extra classes for the wrapper. |