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 en un estilo brutalista con un enfoque en la interactividad para sitios web comerciales / corporativos, con un esquema de color análogo y un diseño receptivo con soporte para modo oscuro. El diseño muestra diferentes animaciones de cargadores que capturan la estética audaz y cruda del brutalismo.
Cargador de neumorfismo
Componente de cargador con estilo Neumorphism y esquema de color Pastel para comercio electrónico. Complejidad simple, receptivo con soporte para modo oscuro. Sin JavaScript.
Componente de cargadores
Un componente de cargadores simple diseñado en estilo Neumorphism para el consumo de contenido con un esquema de color complementario.