all

Everything you need to know about all in loaders. Copy, paste, and customize.

Loaders

Explore all loaders components.

Spinners0.25kb

Spinner

Smooth rotation loader.

<div className="h-8 w-8 rounded-full border-4 border-primary border-t-transparent animate-spin"></div>

Spinners0.4kb

Ring Spinner

Dual-ring concentric loader.

<div className="relative h-10 w-10 flex items-center justify-center">
  <div className="absolute inset-0 rounded-full border-2 border-primary/20"></div>
  <div className="absolute inset-0 rounded-full border-t-2 border-primary animate-spin"></div>
</div>

Progress0.5kb

Bar Loader

Dynamic vertical bar animation.

<div className="flex items-center gap-1 h-8">
  <div className="w-1.5 h-6 bg-primary rounded-full animate-bounce"></div>
  <div className="w-1.5 h-8 bg-primary rounded-full animate-bounce [animation-delay:0.1s]"></div>
  <div className="w-1.5 h-4 bg-primary rounded-full animate-bounce [animation-delay:0.2s]"></div>
</div>

Progress0.3kb

Progress Bar

Indeterminate linear loader.

<div className="w-full h-1.5 bg-muted rounded-full overflow-hidden relative">
  <div className="absolute inset-0 bg-primary w-[40%] animate-pulse"></div>
</div>

Pulse0.3kb

Bouncing Dots

Rhythmic bouncing dots.

<div className="flex gap-1.5 items-center justify-center">
  <div className="w-2.5 h-2.5 rounded-full bg-primary animate-bounce [animation-delay:-0.3s]"></div>
  <div className="w-2.5 h-2.5 rounded-full bg-primary animate-bounce [animation-delay:-0.15s]"></div>
  <div className="w-2.5 h-2.5 rounded-full bg-primary animate-bounce"></div>
</div>

Skeleton0.2kb

Skeleton

Placeholder for content loading.

<div className="w-32 h-4 bg-muted/50 rounded-md animate-pulse"></div>

Skeleton0.7kb

Card Skeleton

Placeholder for card content.

<div className="bg-card border border-border/50 rounded-[2rem] p-8 space-y-6 w-80">
  <div className="space-y-3">
    <div className="w-1/3 h-6 bg-muted/50 rounded-md animate-pulse"></div>
    <div className="w-1/2 h-4 bg-muted/50 rounded-md animate-pulse"></div>
  </div>
  <div className="space-y-2">
    <div className="w-full h-4 bg-muted/50 rounded-md animate-pulse"></div>
    <div className="w-full h-4 bg-muted/50 rounded-md animate-pulse"></div>
    <div className="w-4/5 h-4 bg-muted/50 rounded-md animate-pulse"></div>
  </div>
  <div className="pt-4 flex gap-3">
    <div className="w-24 h-10 bg-muted/50 rounded-xl animate-pulse"></div>
    <div className="w-24 h-10 bg-muted/50 rounded-xl animate-pulse"></div>
  </div>
</div>