Loader

A loading component with multiple variants to indicate processing states and provide visual feedback to users during wait times.

circular

classic

pulse

pulse-dot

dots

typing

wave

bars

terminal

Thinking

text-blink

Thinking

text-shimmer

Thinking . . .

loading-dots

Installation

pnpm dlx shadcn-svelte@latest add http://sveltekit-prerender/r/loader.json

Compare the supported loader variants and sizes when building pending AI states.

circular

classic

pulse

pulse-dot

dots

typing

wave

bars

terminal

Thinking

text-blink

Thinking

text-shimmer

Thinking . . .

loading-dots

Prop	Type	Default	Description
`variant`	`"circular" \| "classic" \| "pulse" \| "pulse-dot" \| "dots" \| "typing" \| "wave" \| "bars" \| "terminal" \| "text-blink" \| "text-shimmer" \| "loading-dots"`	`"circular"`	Visual loader style to render.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Shared size token for the selected loader.
`text`	`string`	`-`	Optional label used by text-based variants.
`class`	`string`	`-`	Additional CSS classes passed to the selected loader variant.