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
Componente de cargadores
Un componente de cargadores diseñado en 3D que muestra animaciones de carga con profundidad y compromiso, efectos responsivos y compatibilidad con temas oscuros mediante Tailwind CSS.
Cargador de modo oscuro
Loader o Skeleton Component para interfaces de modo oscuro, con características responsivas. No se necesita Javascript.
Cargador neumórfico
Un componente de cargador neumórfico simple para sitios de comercio electrónico con soporte para modo oscuro.