Componente de cargadores
Un componente de cargadores simple diseñado para interfaces de redes sociales en modo oscuro que utilizan un esquema de color monocromático.
Código HTML
<div class="flex items-center justify-center min-h-screen bg-gray-900 dark:bg-gray-800">
<div class="flex">
<div class="loader bg-gray-600 dark:bg-gray-400 rounded-full w-16 h-16 animate-bounce mr-4"></div>
<div class="loader bg-gray-600 dark:bg-gray-400 rounded-full w-16 h-16 animate-bounce"></div>
</div>
<div class="flex flex-col items-center ml-4">
<h2 class="text-gray-200 dark:text-gray-100 text-xl mb-2">Loading...</h2>
<div class="flex space-x-2">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-gray-600 dark:border-gray-400">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-gray-600 dark:border-gray-400">
</div>
</div>
</div>
<style>
@keyframes bounce {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-15px);
}
}
</style>Componentes relacionados
Comercio electrónico Autumn Dark Loader
Un componente de cargador sensible para aplicaciones de comercio electrónico, con colores otoñales sobre un fondo oscuro, diseñado para reducir la fatiga visual. Incluye tres animaciones de cargador distintas.
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.
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.