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
Organic Nature-Inspired Loader Component
A high-contrast, nature-inspired loading component suitable for business and corporate websites, featuring flowing lines and dark mode support.
Loaders Component
A complex, responsive, retro-vintage loader component for business websites, with vibrant colors and dark mode support.
Brutalist_Music_Loader
A brutalist-inspired loading component for music/audio platforms, featuring high-contrast purple/violet tones and responsive design with dark mode support. Simulates a 'music wave' or 'playback' loading state.