Card Skeleton

pulse x shimmer

Card skeleton loader with shimmer pulse animation. From Animata.

skeletoncardshimmeranimata

Code

skeleton-card.tsx

export function CardSkeleton() {
  return (
    <div className="w-full space-y-3 rounded-xl border border-border p-5" aria-busy role="status">
      <span className="sr-only">Loading…</span>
      <div className="h-4 w-3/4 animate-pulse rounded bg-muted" />
      <div className="h-3 w-full animate-pulse rounded bg-muted" />
      <div className="h-3 w-5/6 animate-pulse rounded bg-muted" />
      <div className="h-20 w-full animate-pulse rounded-lg bg-muted" />
    </div>
  );
}

Use it in another build

Paste the code into a component file, keep your project tokens (background, brand, radius) and it themes itself. Or tell Claude Code: “add the Card Skeleton component and wire it to my accent.”