Loaders Component
A Material Design styled Loaders Component with a responsive design for showcasing work or products, featuring a dark theme and using Tailwind CSS.
HTML Code
<div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900">
<div class="w-full max-w-md p-6 border border-gray-300 rounded-lg shadow-lg dark:border-gray-700 dark:shadow-gray-800 bg-white dark:bg-gray-800">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 text-center mb-4">Loading Portfolio...</h2>
<div class="space-y-6">
<!-- Loader Item 1 -->
<div class="flex items-center space-x-4 animate-pulse">
<img class="h-16 w-16 rounded-full bg-gray-300 dark:bg-gray-700" src="https://picsum.photos/200/200" alt="Project Thumbnail" />
<div class="flex-1">
<div class="h-4 bg-gray-300 dark:bg-gray-700 rounded w-3/4 mb-2"></div>
<div class="h-3 bg-gray-300 dark:bg-gray-700 rounded w-1/2"></div>
</div>
</div>
<!-- Loader Item 2 -->
<div class="flex items-center space-x-4 animate-pulse">
<img class="h-16 w-16 rounded-full bg-gray-300 dark:bg-gray-700" src="https://picsum.photos/201/200" alt="Project Thumbnail" />
<div class="flex-1">
<div class="h-4 bg-gray-300 dark:bg-gray-700 rounded w-3/4 mb-2"></div>
<div class="h-3 bg-gray-300 dark:bg-gray-700 rounded w-1/2"></div>
</div>
</div>
<!-- Loader Item 3 -->
<div class="flex items-center space-x-4 animate-pulse">
<img class="h-16 w-16 rounded-full bg-gray-300 dark:bg-gray-700" src="https://picsum.photos/202/200" alt="Project Thumbnail" />
<div class="flex-1">
<div class="h-4 bg-gray-300 dark:bg-gray-700 rounded w-3/4 mb-2"></div>
<div class="h-3 bg-gray-300 dark:bg-gray-700 rounded w-1/2"></div>
</div>
</div>
<!-- Loader Item 4 -->
<div class="flex items-center space-x-4 animate-pulse">
<img class="h-16 w-16 rounded-full bg-gray-300 dark:bg-gray-700" src="https://picsum.photos/203/200" alt="Project Thumbnail" />
<div class="flex-1">
<div class="h-4 bg-gray-300 dark:bg-gray-700 rounded w-3/4 mb-2"></div>
<div class="h-3 bg-gray-300 dark:bg-gray-700 rounded w-1/2"></div>
</div>
</div>
</div>
</div>
</div>
Related Components
Loaders Component
A loaders component designed based on Material Design principles with Tailwind CSS support for dark mode and responsive effects.
Loaders Component
A Loaders Component designed in Material Design style with responsive effects and dark theme support using Tailwind CSS.
Neumorphism Loader
A Neumorphism-styled loader component with responsive effects and dark theme support using Tailwind CSS. No JavaScript is needed. Uses subtle shadows to create an extruded effect from the background. Dark mode supported with CSS.