Skeleton Loader Generator

Create beautiful loading placeholders for cards, lists, tables, avatars, buttons, dashboards, and more.

Choose Template

Live Preview

Quick Actions

Customization Options

Animation Type

Animation Speed

Border Radius8px

Theme Mode

Show Cover ImageShow Avatar Header

Generated Code

<div className="w-full max-w-sm p-5 border rounded-2xl shadow-sm bg-zinc-900 border-zinc-800 text-zinc-100 space-y-4">
  <div className="w-full h-44 bg-zinc-800 animate-pulse rounded-[8px]" />
  <div className="flex items-center gap-3">
    <div className="w-10 h-10 bg-zinc-800 animate-pulse rounded-full" />
    <div className="space-y-1.5 flex-1">
      <div className="h-4 w-28 bg-zinc-800 animate-pulse rounded-[8px]" />
      <div className="h-3 w-16 bg-zinc-800 animate-pulse rounded-[8px]" />
    </div>
  </div>
  <div className="space-y-2">
    <div className="h-3 w-full bg-zinc-800 animate-pulse rounded-[8px]" />
    <div className="h-3 w-full bg-zinc-800 animate-pulse rounded-[8px]" />
    <div className="h-3 w-2/3 bg-zinc-800 animate-pulse rounded-[8px]" />
  </div>
</div>