Loaders Component
A loaders component designed in Material Design style, featuring responsive effects and dark theme support using Tailwind CSS.
HTML Code
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
<div class="loader-container grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
<div class="loader bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md hover:shadow-lg transition duration-300 ease-in-out">
<div class="animate-bounce w-20 h-20 bg-blue-500 rounded-full mx-auto mb-4"></div>
<p class="text-center text-gray-700 dark:text-gray-300">Loading...</p>
</div>
<div class="loader bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md hover:shadow-lg transition duration-300 ease-in-out">
<div class="animate-bounce w-20 h-20 bg-green-500 rounded-full mx-auto mb-4"></div>
<p class="text-center text-gray-700 dark:text-gray-300">Loading...</p>
</div>
<div class="loader bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md hover:shadow-lg transition duration-300 ease-in-out">
<div class="animate-bounce w-20 h-20 bg-red-500 rounded-full mx-auto mb-4"></div>
<p class="text-center text-gray-700 dark:text-gray-300">Loading...</p>
</div>
<div class="loader bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md hover:shadow-lg transition duration-300 ease-in-out">
<div class="animate-bounce w-20 h-20 bg-yellow-500 rounded-full mx-auto mb-4"></div>
<p class="text-center text-gray-700 dark:text-gray-300">Loading...</p>
</div>
<div class="loader bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md hover:shadow-lg transition duration-300 ease-in-out">
<div class="animate-bounce w-20 h-20 bg-purple-500 rounded-full mx-auto mb-4"></div>
<p class="text-center text-gray-700 dark:text-gray-300">Loading...</p>
</div>
<div class="loader bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md hover:shadow-lg transition duration-300 ease-in-out">
<div class="animate-bounce w-20 h-20 bg-pink-500 rounded-full mx-auto mb-4"></div>
<p class="text-center text-gray-700 dark:text-gray-300">Loading...</p>
</div>
</div>
</div>Related Components
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.
Neumorphic Loader
A simple Neumorphic loader component for e-commerce sites with dark mode support.
Loaders Component
A Loaders Component designed in Material Design style with responsive effects and dark theme support using Tailwind CSS.