Componente de cargadores
Un componente de cargadores diseñado en base a los principios de Material Design con soporte Tailwind CSS para el modo oscuro y efectos responsivos.
Código HTML
<div class="flex flex-col items-center justify-center h-screen bg-gray-100 dark:bg-gray-800">
<h1 class="text-2xl font-bold mb-8 text-gray-800 dark:text-white">Loading...</h1>
<div class="flex items-center justify-center space-x-4">
<div class="loader w-16 h-16 border-4 border-blue-500 rounded-full border-t-transparent animate-spin"></div>
<div class="loader w-16 h-16 border-4 border-green-500 rounded-full border-t-transparent animate-spin"></div>
<div class="loader w-16 h-16 border-4 border-red-500 rounded-full border-t-transparent animate-spin"></div>
</div>
<div class="mt-8">
<img class="w-24 h-24 rounded-full shadow-lg" src="https://picsum.photos/100/100" alt="Random Image" />
</div>
<div class="mt-2 text-sm text-gray-500 dark:text-gray-400">This is an example of a loading component with material design.</div>
</div>
<style>
@tailwind base;
@tailwind components;
@tailwind utilities;
.loader {
@apply animate-spin;
}
@media (prefers-color-scheme: dark) {
/* Dark mode styles */
.loader {
filter: brightness(1.2);
}
}
</style>
Componentes relacionados
Neon_Glow_Autumn_Loader
Un componente de cargador moderadamente complejo con efectos de neón/resplandor y colores otoñales, adecuado para sistemas de reserva y reservas. Cuenta con diseño responsivo y soporte para modo oscuro.
Memphis_Food_Loader
Un componente de cargador de temática alimentaria simple y receptivo con elementos de diseño de Memphis, colores neutros cálidos y soporte para modo oscuro, adecuado para sitios web de entrega de alimentos y restaurantes.
Componente de cargadores
Un componente de cargadores de estilo Material Design con un diseño responsivo para mostrar trabajos o productos, con un tema oscuro y usando Tailwind CSS.