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
Componente de cargadores
Un componente de cargador de modo oscuro simple con un esquema de color complementario.
Spinner de carga en escala de grises
Un componente giratorio de carga simple con colores en escala de grises y enfoque de microinteracción.
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.