Skip to content

Instantly share code, notes, and snippets.

@BSN4

BSN4/gist:7f0e8f7fef1e2579a92d90cde8bff830

Created March 8, 2023 01:45
Show Gist options
  • Save BSN4/7f0e8f7fef1e2579a92d90cde8bff830 to your computer and use it in GitHub Desktop.
Save BSN4/7f0e8f7fef1e2579a92d90cde8bff830 to your computer and use it in GitHub Desktop.
Download ZIP
Tailwind CSS: Creating Shimmer Loading Placeholder (Skeleton)
Raw
gistfile1.txt
<body class="p-20">
<div class="grid sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
<div class="w-full bg-white drop-shadow-md rounded-lg">
<div class="animate-pulse w-full h-48 bg-slate-200"></div>
<div class="p-3 space-y-4">
<div class="animate-pulse w-2/3 h-6 bg-slate-200"></div>
<div class="flex space-x-4">
<div class="animate-pulse w-1/3 h-3 bg-sky-200"></div>
<div class="animate-pulse w-1/3 h-3 bg-sky-200"></div>
<div class="animate-pulse w-1/3 h-3 bg-sky-200"></div>
</div>
<div class="space-y-2">
<div class="animate-pulse w-3/4 h-3 bg-slate-200"></div>
<div class="animate-pulse w-full h-3 bg-slate-200"></div>
<div class="animate-pulse w-2/3 h-3 bg-slate-200"></div>
</div>
</div>
</div>
<div class="w-full bg-white drop-shadow-md rounded-lg">
<div class="animate-pulse w-full h-48 bg-slate-200"></div>
<div class="p-3 space-y-4">
<div class="animate-pulse w-2/3 h-6 bg-slate-200"></div>
<div class="flex space-x-4">
<div class="animate-pulse w-1/3 h-3 bg-sky-200"></div>
<div class="animate-pulse w-1/3 h-3 bg-sky-200"></div>
<div class="animate-pulse w-1/3 h-3 bg-sky-200"></div>
</div>
<div class="space-y-2">
<div class="animate-pulse w-3/4 h-3 bg-slate-200"></div>
<div class="animate-pulse w-full h-3 bg-slate-200"></div>
<div class="animate-pulse w-2/3 h-3 bg-slate-200"></div>
</div>
</div>
</div>
<div class="w-full bg-white drop-shadow-md rounded-lg">
<div class="animate-pulse w-full h-48 bg-slate-200"></div>
<div class="p-3 space-y-4">
<div class="animate-pulse w-2/3 h-6 bg-slate-200"></div>
<div class="flex space-x-4">
<div class="animate-pulse w-1/3 h-3 bg-sky-200"></div>
<div class="animate-pulse w-1/3 h-3 bg-sky-200"></div>
<div class="animate-pulse w-1/3 h-3 bg-sky-200"></div>
</div>
<div class="space-y-2">
<div class="animate-pulse w-3/4 h-3 bg-slate-200"></div>
<div class="animate-pulse w-full h-3 bg-slate-200"></div>
<div class="animate-pulse w-2/3 h-3 bg-slate-200"></div>
</div>
</div>
</div>
</div>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment