Cargador de neumorfismo
Componente del cargador de neumorfismo con colores complementarios
Código HTML
<div class="flex justify-center items-center h-screen bg-gray-200 dark:bg-gray-800">
<div class="relative w-24 h-24">
<div class="absolute top-0 left-0 w-full h-full rounded-full bg-gray-200 dark:bg-gray-700" style="box-shadow: inset 5px 5px 10px #b3b3b3, inset -5px -5px 10px #ffffff; dark:box-shadow: inset 5px 5px 10px #4a4a4a, inset -5px -5px 10px #626262;"></div>
<div class="absolute top-0 left-0 w-full h-full rounded-full bg-gradient-to-r from-blue-500 to-purple-600 animate-spin" style="filter: blur(10px);"></div>
<div class="absolute top-0 left-0 w-full h-full rounded-full border-4 border-transparent border-t-blue-500 border-b-purple-600 animate-spin"></div>
<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-gray-600 dark:text-gray-300 text-xl font-semibold">Loading</div>
</div>
</div>Componentes relacionados
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.
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 del cargador de Glassmorphism
Un componente de cargador simple, de estilo glassmorphism, con colores complementarios, adecuado para una cartera, con soporte de modo responsivo y oscuro.