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.
Código HTML
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
<div class="loader">
<div class="rounded-lg border-4 border-blue-500 dark:border-blue-300 h-16 w-16 animate-spin"></div>
<div class="mt-5 text-center">
<img class="rounded-full h-12 w-12 mx-auto" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" />
<div class="text-lg font-bold text-gray-800 dark:text-gray-200">Loading Content...</div>
</div>
</div>
</div>
<style>
.loader {
background: linear-gradient(145deg, #e6e6e6, #f0f0f0);
border-radius: 15px;
box-shadow: 20px 20px 60px #d1d1d1,
-20px -20px 60px #ffffff;
padding: 20px;
}
</style>Componentes relacionados
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.
Playful_Finance_Loader
Un componente de carga divertido y simple para interfaces financieras / bancarias, con neutros geniales y elementos redondeados. Totalmente receptivo con soporte para modo oscuro.
Componente de cargadores
Un componente de cargadores simple diseñado en estilo Neumorphism para el consumo de contenido con un esquema de color complementario.