Loader

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

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

Loader With Text

Some loader variants support displaying custom text while loading.

text-blink

text-shimmer

Loading......

loading-dots

Installation

npx shadcn add "https://prompt-kit.com/c/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.

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