Cargador neumórfico
Un componente de cargador neumórfico simple para sitios de comercio electrónico con soporte para modo oscuro.
Código HTML
<div class="flex items-center justify-center h-screen bg-gray-100 dark:bg-gray-800">
<div class="w-64 h-64">
<div class="relative w-full h-full rounded-lg bg-gray-200 dark:bg-gray-700 shadow-neumorphic-light dark:shadow-neumorphic-dark">
<div class="absolute top-0 left-0 w-full h-full flex items-center justify-center">
<div class="w-16 h-16 border-4 border-blue-500 border-solid rounded-full animate-spin border-t-transparent"></div>
</div>
<div class="absolute top-0 left-0 w-full h-full flex items-center justify-center">
<div class="w-10 h-10 border-4 border-purple-500 border-solid rounded-full animate-spin border-t-transparent"></div>
</div>
</div>
</div>
</div>
<style>
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.animate-spin {
animation: spin 1s linear infinite;
}
.shadow-neumorphic-light {
box-shadow: 7px 7px 14px #b0b0b0, -7px -7px 14px #ffffff;
}
.dark .shadow-neumorphic-dark {
box-shadow: 7px 7px 14px #4a4a4a, -7px -7px 14px #363636;
}
</style>Componentes relacionados
Organic_Nature_Inspired_Food_Loader
Un componente de carga de complejidad moderada para sitios web de alimentos/restaurantes, con un diseño orgánico inspirado en la naturaleza con colores apagados y capacidad de respuesta completa, incluida la compatibilidad con el modo oscuro.
Componente de cargador Skeuomorphic
Un componente de cargador profesional y receptivo con un diseño esqueuomórfico, combinación de colores complementaria y compatibilidad con modo oscuro, adecuado para sitios web comerciales / corporativos. Cuenta con una barra de carga sutil y animada dentro de un contenedor metálico.
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.