Componente de cargadores
Un componente de cargadores diseñado con un estilo esqueuomórfico que utiliza un esquema de color triádico para un blog o sitio web centrado en el contenido. Cuenta con un diseño simple apropiado para el consumo de contenido, incorporando soporte para el modo oscuro.
Código HTML
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
<div class="loader">
<div class="rounded-lg border-4 border-blue-500 dark:border-blue-300 h-16 w-16 animate-spin"></div>
<div class="mt-5 text-center">
<img class="rounded-full h-12 w-12 mx-auto" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" />
<div class="text-lg font-bold text-gray-800 dark:text-gray-200">Loading Content...</div>
</div>
</div>
</div>
<style>
.loader {
background: linear-gradient(145deg, #e6e6e6, #f0f0f0);
border-radius: 15px;
box-shadow: 20px 20px 60px #d1d1d1,
-20px -20px 60px #ffffff;
padding: 20px;
}
</style>Componentes relacionados
Cargador neumórfico
Un componente de cargador neumórfico simple para sitios de comercio electrónico con soporte para modo oscuro.
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.