Componente de cargadores
Un componente de cargadores simple diseñado en estilo Neumorphism para el consumo de contenido con un esquema de color complementario.
Código HTML
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-200 dark:bg-gray-800 p-4">
<div class="bg-white dark:bg-gray-700 shadow-neumorphism rounded-lg p-6 w-80">
<div class="animate-pulse">
<div class="h-4 bg-gray-300 dark:bg-gray-600 rounded w-3/4 mb-4"></div>
<div class="h-4 bg-gray-300 dark:bg-gray-600 rounded w-full mb-4"></div>
<div class="h-4 bg-gray-300 dark:bg-gray-600 rounded w-5/6 mb-4"></div>
<div class="h-4 bg-gray-300 dark:bg-gray-600 rounded w-4/5"></div>
</div>
</div>
<div class="mt-8 flex flex-col items-center">
<img src="https://picsum.photos/100" class="rounded-full shadow-neumorphism" alt="Random image cat">
<div class="mt-2 font-semibold text-lg text-gray-800 dark:text-gray-200">Loading...</div>
</div>
</div>
<style>
.shadow-neumorphism {
box-shadow: 8px 8px 16px rgba(0,0,0,0.2),
-8px -8px 16px rgba(255, 255, 255, 0.7);
}
</style>Componentes relacionados
Cargador neumórfico
Un componente de cargador neumórfico simple para sitios de comercio electrónico con soporte para modo oscuro.
Componente de cargadores
Un componente de carga complejo, receptivo, de estilo Glassmorphism para comercio electrónico, con un esquema de color triádico y soporte para modo oscuro, que utiliza HTML y Tailwind CSS.