Skeleton Loader Components
Beautiful skeleton loader components built with TailwindCSS. Perfect for showing loading states while content is being fetched.
1. Simple Skeleton Card
Basic skeleton loader for card components with animated placeholders.
<!-- Simple Skeleton Card -->
<div class="bg-white rounded-lg shadow-lg p-6 max-w-md w-full">
<div class="animate-pulse">
<div class="h-4 bg-gray-300 rounded w-3/4 mb-4"></div>
<div class="h-4 bg-gray-300 rounded w-1/2 mb-4"></div>
<div class="h-4 bg-gray-300 rounded w-5/6 mb-4"></div>
<div class="h-4 bg-gray-300 rounded w-2/3"></div>
</div>
</div><template>
<!-- Simple Skeleton Card -->
<div class="bg-white rounded-lg shadow-lg p-6 max-w-md w-full">
<div class="animate-pulse">
<div class="h-4 bg-gray-300 rounded w-3/4 mb-4"></div>
<div class="h-4 bg-gray-300 rounded w-1/2 mb-4"></div>
<div class="h-4 bg-gray-300 rounded w-5/6 mb-4"></div>
<div class="h-4 bg-gray-300 rounded w-2/3"></div>
</div>
</div>
</template>export default function SimpleSkeletonCard() {
return (
<div className="bg-white rounded-lg shadow-lg p-6 max-w-md w-full">
<div className="animate-pulse">
<div className="h-4 bg-gray-300 rounded w-3/4 mb-4"></div>
<div className="h-4 bg-gray-300 rounded w-1/2 mb-4"></div>
<div className="h-4 bg-gray-300 rounded w-5/6 mb-4"></div>
<div className="h-4 bg-gray-300 rounded w-2/3"></div>
</div>
</div>
);
}2. Skeleton List
Skeleton loader for list items with avatar placeholders and text lines.
<!-- Skeleton List -->
<div class="space-y-4">
<div class="flex items-center space-x-4 animate-pulse">
<div class="w-10 h-10 bg-gray-300 rounded-full"></div>
<div class="flex-1 space-y-2">
<div class="h-4 bg-gray-300 rounded w-3/4"></div>
<div class="h-4 bg-gray-300 rounded w-1/2"></div>
</div>
</div>
<div class="flex items-center space-x-4 animate-pulse">
<div class="w-10 h-10 bg-gray-300 rounded-full"></div>
<div class="flex-1 space-y-2">
<div class="h-4 bg-gray-300 rounded w-3/4"></div>
<div class="h-4 bg-gray-300 rounded w-1/2"></div>
</div>
</div>
</div><template>
<!-- Skeleton List -->
<div class="space-y-4">
<div class="flex items-center space-x-4 animate-pulse">
<div class="w-10 h-10 bg-gray-300 rounded-full"></div>
<div class="flex-1 space-y-2">
<div class="h-4 bg-gray-300 rounded w-3/4"></div>
<div class="h-4 bg-gray-300 rounded w-1/2"></div>
</div>
</div>
<div class="flex items-center space-x-4 animate-pulse">
<div class="w-10 h-10 bg-gray-300 rounded-full"></div>
<div class="flex-1 space-y-2">
<div class="h-4 bg-gray-300 rounded w-3/4"></div>
<div class="h-4 bg-gray-300 rounded w-1/2"></div>
</div>
</div>
</div>
</template>export default function SkeletonList() {
return (
<div className="space-y-4">
<div className="flex items-center space-x-4 animate-pulse">
<div className="w-10 h-10 bg-gray-300 rounded-full"></div>
<div className="flex-1 space-y-2">
<div className="h-4 bg-gray-300 rounded w-3/4"></div>
<div className="h-4 bg-gray-300 rounded w-1/2"></div>
</div>
</div>
<div className="flex items-center space-x-4 animate-pulse">
<div className="w-10 h-10 bg-gray-300 rounded-full"></div>
<div className="flex-1 space-y-2">
<div className="h-4 bg-gray-300 rounded w-3/4"></div>
<div className="h-4 bg-gray-300 rounded w-1/2"></div>
</div>
</div>
</div>
);
}3. Skeleton with Avatar and Text
Skeleton loader for profile cards with avatar, name, and description placeholders.
<!-- Skeleton with Avatar and Text -->
<div class="bg-white rounded-lg shadow-lg p-6 max-w-md w-full animate-pulse">
<div class="flex items-center space-x-4 mb-4">
<div class="w-12 h-12 bg-gray-300 rounded-full"></div>
<div class="flex-1 space-y-2">
<div class="h-4 bg-gray-300 rounded w-1/2"></div>
<div class="h-3 bg-gray-300 rounded w-1/3"></div>
</div>
</div>
<div class="space-y-2">
<div class="h-4 bg-gray-300 rounded w-full"></div>
<div class="h-4 bg-gray-300 rounded w-5/6"></div>
<div class="h-4 bg-gray-300 rounded w-4/6"></div>
</div>
</div><template>
<!-- Skeleton with Avatar and Text -->
<div class="bg-white rounded-lg shadow-lg p-6 max-w-md w-full animate-pulse">
<div class="flex items-center space-x-4 mb-4">
<div class="w-12 h-12 bg-gray-300 rounded-full"></div>
<div class="flex-1 space-y-2">
<div class="h-4 bg-gray-300 rounded w-1/2"></div>
<div class="h-3 bg-gray-300 rounded w-1/3"></div>
</div>
</div>
<div class="space-y-2">
<div class="h-4 bg-gray-300 rounded w-full"></div>
<div class="h-4 bg-gray-300 rounded w-5/6"></div>
<div class="h-4 bg-gray-300 rounded w-4/6"></div>
</div>
</div>
</template>export default function SkeletonWithAvatarAndText() {
return (
<div className="bg-white rounded-lg shadow-lg p-6 max-w-md w-full animate-pulse">
<div className="flex items-center space-x-4 mb-4">
<div className="w-12 h-12 bg-gray-300 rounded-full"></div>
<div className="flex-1 space-y-2">
<div className="h-4 bg-gray-300 rounded w-1/2"></div>
<div className="h-3 bg-gray-300 rounded w-1/3"></div>
</div>
</div>
<div className="space-y-2">
<div className="h-4 bg-gray-300 rounded w-full"></div>
<div className="h-4 bg-gray-300 rounded w-5/6"></div>
<div className="h-4 bg-gray-300 rounded w-4/6"></div>
</div>
</div>
);
}4. Skeleton Table
Skeleton loader for table components with header and data rows.
<!-- Skeleton Table -->
<div class="bg-white rounded-lg shadow-lg overflow-hidden">
<div class="animate-pulse">
<div class="flex bg-gray-200 p-4">
<div class="h-4 bg-gray-300 rounded w-1/4"></div>
<div class="h-4 bg-gray-300 rounded w-1/4 ml-4"></div>
<div class="h-4 bg-gray-300 rounded w-1/4 ml-4"></div>
<div class="h-4 bg-gray-300 rounded w-1/4 ml-4"></div>
</div>
<div class="p-4 space-y-3">
<div class="flex">
<div class="h-4 bg-gray-300 rounded w-1/4"></div>
<div class="h-4 bg-gray-300 rounded w-1/4 ml-4"></div>
<div class="h-4 bg-gray-300 rounded w-1/4 ml-4"></div>
<div class="h-4 bg-gray-300 rounded w-1/4 ml-4"></div>
</div>
<div class="flex">
<div class="h-4 bg-gray-300 rounded w-1/4"></div>
<div class="h-4 bg-gray-300 rounded w-1/4 ml-4"></div>
<div class="h-4 bg-gray-300 rounded w-1/4 ml-4"></div>
<div class="h-4 bg-gray-300 rounded w-1/4 ml-4"></div>
</div>
</div>
</div>
</div><template>
<!-- Skeleton Table -->
<div class="bg-white rounded-lg shadow-lg overflow-hidden">
<div class="animate-pulse">
<div class="flex bg-gray-200 p-4">
<div class="h-4 bg-gray-300 rounded w-1/4"></div>
<div class="h-4 bg-gray-300 rounded w-1/4 ml-4"></div>
<div class="h-4 bg-gray-300 rounded w-1/4 ml-4"></div>
<div class="h-4 bg-gray-300 rounded w-1/4 ml-4"></div>
</div>
<div class="p-4 space-y-3">
<div class="flex">
<div class="h-4 bg-gray-300 rounded w-1/4"></div>
<div class="h-4 bg-gray-300 rounded w-1/4 ml-4"></div>
<div class="h-4 bg-gray-300 rounded w-1/4 ml-4"></div>
<div class="h-4 bg-gray-300 rounded w-1/4 ml-4"></div>
</div>
<div class="flex">
<div class="h-4 bg-gray-300 rounded w-1/4"></div>
<div class="h-4 bg-gray-300 rounded w-1/4 ml-4"></div>
<div class="h-4 bg-gray-300 rounded w-1/4 ml-4"></div>
<div class="h-4 bg-gray-300 rounded w-1/4 ml-4"></div>
</div>
</div>
</div>
</div>
</template>export default function SkeletonTable() {
return (
<div className="bg-white rounded-lg shadow-lg overflow-hidden">
<div className="animate-pulse">
<div className="flex bg-gray-200 p-4">
<div className="h-4 bg-gray-300 rounded w-1/4"></div>
<div className="h-4 bg-gray-300 rounded w-1/4 ml-4"></div>
<div className="h-4 bg-gray-300 rounded w-1/4 ml-4"></div>
<div className="h-4 bg-gray-300 rounded w-1/4 ml-4"></div>
</div>
<div className="p-4 space-y-3">
<div className="flex">
<div className="h-4 bg-gray-300 rounded w-1/4"></div>
<div className="h-4 bg-gray-300 rounded w-1/4 ml-4"></div>
<div className="h-4 bg-gray-300 rounded w-1/4 ml-4"></div>
<div className="h-4 bg-gray-300 rounded w-1/4 ml-4"></div>
</div>
<div className="flex">
<div className="h-4 bg-gray-300 rounded w-1/4"></div>
<div className="h-4 bg-gray-300 rounded w-1/4 ml-4"></div>
<div className="h-4 bg-gray-300 rounded w-1/4 ml-4"></div>
<div className="h-4 bg-gray-300 rounded w-1/4 ml-4"></div>
</div>
</div>
</div>
</div>
);
}5. Skeleton Article
Skeleton loader for article or blog post layouts with image, title, and content placeholders.
<!-- Skeleton Article -->
<div class="bg-white rounded-lg shadow-lg p-6 max-w-2xl w-full animate-pulse">
<div class="h-48 bg-gray-300 rounded mb-4"></div>
<div class="h-6 bg-gray-300 rounded w-3/4 mb-4"></div>
<div class="h-4 bg-gray-300 rounded w-1/2 mb-4"></div>
<div class="space-y-2">
<div class="h-4 bg-gray-300 rounded w-full"></div>
<div class="h-4 bg-gray-300 rounded w-5/6"></div>
<div class="h-4 bg-gray-300 rounded w-4/6"></div>
<div class="h-4 bg-gray-300 rounded w-full"></div>
</div>
</div><template>
<!-- Skeleton Article -->
<div class="bg-white rounded-lg shadow-lg p-6 max-w-2xl w-full animate-pulse">
<div class="h-48 bg-gray-300 rounded mb-4"></div>
<div class="h-6 bg-gray-300 rounded w-3/4 mb-4"></div>
<div class="h-4 bg-gray-300 rounded w-1/2 mb-4"></div>
<div class="space-y-2">
<div class="h-4 bg-gray-300 rounded w-full"></div>
<div class="h-4 bg-gray-300 rounded w-5/6"></div>
<div class="h-4 bg-gray-300 rounded w-4/6"></div>
<div class="h-4 bg-gray-300 rounded w-full"></div>
</div>
</div>
</template>export default function SkeletonArticle() {
return (
<div className="bg-white rounded-lg shadow-lg p-6 max-w-2xl w-full animate-pulse">
<div className="h-48 bg-gray-300 rounded mb-4"></div>
<div className="h-6 bg-gray-300 rounded w-3/4 mb-4"></div>
<div className="h-4 bg-gray-300 rounded w-1/2 mb-4"></div>
<div className="space-y-2">
<div className="h-4 bg-gray-300 rounded w-full"></div>
<div className="h-4 bg-gray-300 rounded w-5/6"></div>
<div className="h-4 bg-gray-300 rounded w-4/6"></div>
<div className="h-4 bg-gray-300 rounded w-full"></div>
</div>
</div>
);
}6. Skeleton Social Media Feed
Skeleton loader for social media posts with avatar, content, and interaction placeholders.
<!-- Skeleton Social Media Feed -->
<div class="space-y-6">
<div class="bg-white rounded-lg shadow-lg p-6 animate-pulse">
<div class="flex items-center space-x-4 mb-4">
<div class="w-12 h-12 bg-gray-300 rounded-full"></div>
<div class="flex-1 space-y-2">
<div class="h-4 bg-gray-300 rounded w-1/3"></div>
<div class="h-3 bg-gray-300 rounded w-1/4"></div>
</div>
</div>
<div class="space-y-2 mb-4">
<div class="h-4 bg-gray-300 rounded w-full"></div>
<div class="h-4 bg-gray-300 rounded w-5/6"></div>
<div class="h-4 bg-gray-300 rounded w-4/6"></div>
</div>
<div class="flex space-x-4">
<div class="h-8 bg-gray-300 rounded w-16"></div>
<div class="h-8 bg-gray-300 rounded w-16"></div>
<div class="h-8 bg-gray-300 rounded w-16"></div>
</div>
</div>
<div class="bg-white rounded-lg shadow-lg p-6 animate-pulse">
<div class="flex items-center space-x-4 mb-4">
<div class="w-12 h-12 bg-gray-300 rounded-full"></div>
<div class="flex-1 space-y-2">
<div class="h-4 bg-gray-300 rounded w-1/3"></div>
<div class="h-3 bg-gray-300 rounded w-1/4"></div>
</div>
</div>
<div class="h-32 bg-gray-300 rounded mb-4"></div>
<div class="space-y-2 mb-4">
<div class="h-4 bg-gray-300 rounded w-full"></div>
<div class="h-4 bg-gray-300 rounded w-3/4"></div>
</div>
<div class="flex space-x-4">
<div class="h-8 bg-gray-300 rounded w-16"></div>
<div class="h-8 bg-gray-300 rounded w-16"></div>
<div class="h-8 bg-gray-300 rounded w-16"></div>
</div>
</div>
</div><template>
<!-- Skeleton Social Media Feed -->
<div class="space-y-6">
<div class="bg-white rounded-lg shadow-lg p-6 animate-pulse">
<div class="flex items-center space-x-4 mb-4">
<div class="w-12 h-12 bg-gray-300 rounded-full"></div>
<div class="flex-1 space-y-2">
<div class="h-4 bg-gray-300 rounded w-1/3"></div>
<div class="h-3 bg-gray-300 rounded w-1/4"></div>
</div>
</div>
<div class="space-y-2 mb-4">
<div class="h-4 bg-gray-300 rounded w-full"></div>
<div class="h-4 bg-gray-300 rounded w-5/6"></div>
<div class="h-4 bg-gray-300 rounded w-4/6"></div>
</div>
<div class="flex space-x-4">
<div class="h-8 bg-gray-300 rounded w-16"></div>
<div class="h-8 bg-gray-300 rounded w-16"></div>
<div class="h-8 bg-gray-300 rounded w-16"></div>
</div>
</div>
<div class="bg-white rounded-lg shadow-lg p-6 animate-pulse">
<div class="flex items-center space-x-4 mb-4">
<div class="w-12 h-12 bg-gray-300 rounded-full"></div>
<div class="flex-1 space-y-2">
<div class="h-4 bg-gray-300 rounded w-1/3"></div>
<div class="h-3 bg-gray-300 rounded w-1/4"></div>
</div>
</div>
<div class="h-32 bg-gray-300 rounded mb-4"></div>
<div class="space-y-2 mb-4">
<div class="h-4 bg-gray-300 rounded w-full"></div>
<div class="h-4 bg-gray-300 rounded w-3/4"></div>
</div>
<div class="flex space-x-4">
<div class="h-8 bg-gray-300 rounded w-16"></div>
<div class="h-8 bg-gray-300 rounded w-16"></div>
<div class="h-8 bg-gray-300 rounded w-16"></div>
</div>
</div>
</div>
</template>export default function SkeletonSocialMediaFeed() {
return (
<div className="space-y-6">
<div className="bg-white rounded-lg shadow-lg p-6 animate-pulse">
<div className="flex items-center space-x-4 mb-4">
<div className="w-12 h-12 bg-gray-300 rounded-full"></div>
<div className="flex-1 space-y-2">
<div className="h-4 bg-gray-300 rounded w-1/3"></div>
<div className="h-3 bg-gray-300 rounded w-1/4"></div>
</div>
</div>
<div className="space-y-2 mb-4">
<div className="h-4 bg-gray-300 rounded w-full"></div>
<div className="h-4 bg-gray-300 rounded w-5/6"></div>
<div className="h-4 bg-gray-300 rounded w-4/6"></div>
</div>
<div className="flex space-x-4">
<div className="h-8 bg-gray-300 rounded w-16"></div>
<div className="h-8 bg-gray-300 rounded w-16"></div>
<div className="h-8 bg-gray-300 rounded w-16"></div>
</div>
</div>
<div className="bg-white rounded-lg shadow-lg p-6 animate-pulse">
<div className="flex items-center space-x-4 mb-4">
<div className="w-12 h-12 bg-gray-300 rounded-full"></div>
<div className="flex-1 space-y-2">
<div className="h-4 bg-gray-300 rounded w-1/3"></div>
<div className="h-3 bg-gray-300 rounded w-1/4"></div>
</div>
</div>
<div className="h-32 bg-gray-300 rounded mb-4"></div>
<div className="space-y-2 mb-4">
<div className="h-4 bg-gray-300 rounded w-full"></div>
<div className="h-4 bg-gray-300 rounded w-3/4"></div>
</div>
<div className="flex space-x-4">
<div className="h-8 bg-gray-300 rounded w-16"></div>
<div className="h-8 bg-gray-300 rounded w-16"></div>
<div className="h-8 bg-gray-300 rounded w-16"></div>
</div>
</div>
</div>
);
}