Componente de cargadores
Un componente de cargadores diseñado en 3D que muestra animaciones de carga con profundidad y compromiso, efectos responsivos y compatibilidad con temas oscuros mediante Tailwind CSS.
Código HTML
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-6">Loading...</h2>
<div class="flex space-x-4">
<div class="w-16 h-16 bg-gradient-to-r from-blue-500 to-purple-500 rounded-full animate-ping shadow-lg transform transition-transform duration-500 hover:scale-110"></div>
<div class="w-16 h-16 bg-gradient-to-r from-green-500 to-teal-500 rounded-full animate-ping shadow-lg transform transition-transform duration-500 hover:scale-110"></div>
<div class="w-16 h-16 bg-gradient-to-r from-red-500 to-orange-500 rounded-full animate-ping shadow-lg transform transition-transform duration-500 hover:scale-110"></div>
</div>
<div class="mt-8 flex flex-col items-center">
<img src="https://picsum.photos/100/100?random=1" alt="Loading Image" class="rounded-full border-4 border-white dark:border-gray-800 shadow-lg">
<p class="mt-2 text-sm text-gray-600 dark:text-gray-400">Loading user profile...</p>
</div>
</div>Componentes relacionados
MinimalistaCargador de escala de grises
Diseño minimalista / plano, combinación de colores en escala de grises, componente de cargador de complejidad moderada para sitios web comerciales / corporativos con diseño receptivo y soporte de temas oscuros.
Componente de cargadores
Un componente Loaders sensible diseñado para el modo oscuro, con tonos tierra y complejidad moderada para la exhibición de carteras.
Cargador de neumorfismo
Un componente de carga de neumorfismo simple con un esquema de color monocromático para un portafolio, con diseño receptivo y soporte para temas oscuros.