Loader

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

Installation

Copy and paste the following code into your project.

pnpm dlx shadcn-svelte@latest add https://svelte-ai-elements.vercel.app/p/loader.json

Note: If you are using Tailwind CSS v4, you may have to grab the keyframes and add them to your global.css file manually. Check manual installation for more details.

Examples

Basic Loader

Showcasing all available loader variants with default settings.

circular

classic

pulse

pulse-dot

dots

typing

wave

bars

terminal

Thinking

text-blink

Thinking

text-shimmer

Thinking . . .

loading-dots

Loader Sizes

Customize the size of any loader variant with predefined size options.

circular

classic

pulse

pulse-dot

dots

typing

wave

bars

terminal

Thinking

text-blink

Thinking

text-shimmer

Thinking . . .

loading-dots

Component API

Loader

Prop	Type	Default	Description
`variant`	`"circular" \| "classic" \| "pulse" \| "pulse-dot" \| "dots" \| "typing" \| "wave" \| "bars" \| "terminal" \| "text-blink" \| "text-shimmer" \| "loading-dots"`	`"circular"`	The visual style of the loader
`size`	`"sm" \| "md" \| "lg"`	`"md"`	The size of the loader
`text`	`string`	-	Text to display (for supported variants)
`className`	`string`	-	Additional CSS classes