Organic_Nature_Loader_Real_Estate
Un composant de chargement simple, organique et inspiré de la nature pour les plateformes immobilières, avec des lignes fluides et des couleurs vives à haute saturation avec une réactivité totale et une prise en charge du mode sombre.
HTML Code
<div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-emerald-50 via-teal-50 to-cyan-50 dark:from-slate-900 dark:via-blue-950 dark:to-teal-950 p-4">
<div class="relative w-32 h-32 md:w-48 md:h-48 group">
<!-- Outer flowing circle -->
<div class="absolute inset-0 rounded-full border-4 border-t-emerald-400 border-r-teal-500 border-b-cyan-400 border-l-lime-300 dark:border-t-emerald-700 dark:border-r-teal-800 dark:border-b-cyan-700 dark:border-l-lime-600 animate-spin-slow origin-center ease-in-out scale-100 group-hover:scale-110 transition-transform duration-500"></div>
<!-- Inner flowing circle -->
<div class="absolute inset-4 rounded-full border-4 border-t-teal-400 border-r-cyan-500 border-b-lime-400 border-l-emerald-300 dark:border-t-teal-700 dark:border-r-cyan-800 dark:border-b-lime-700 dark:border-l-emerald-600 animate-[spin-reverse_4s_linear_infinite] origin-center rotate-45 scale-90 group-hover:scale-100 transition-transform duration-500"></div>
<!-- Central organic shape placeholder -->
<div class="absolute inset-8 md:inset-12 bg-gradient-to-br from-emerald-300 via-teal-400 to-cyan-300 dark:from-emerald-600 dark:via-teal-700 dark:to-cyan-600 rounded-full flex items-center justify-center overflow-hidden transform animate-pulse-slight origin-center group-hover:rotate-12 transition-transform duration-500 shadow-md dark:shadow-lg">
<svg class="w-10 h-10 md:w-16 md:h-16 text-white dark:text-gray-200 opacity-80" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M12 2L2 12h3v8h14v-8h3L12 2zm0 3.394l6 6H6l6-6zM7 14h10v4H7v-4z"/>
</svg>
</div>
<!-- Organic-like leaf/petal elements (simplified for loader) -->
<div class="absolute top-0 left-1/2 -translate-x-1/2 w-4 h-4 md:w-6 md:h-6 rounded-full bg-emerald-400 dark:bg-emerald-600 animate-[leaf-pulse_2s_ease-in-out_infinite_0s] transform rotate-45 origin-bottom-right group-hover:scale-125 transition-transform duration-500"></div>
<div class="absolute bottom-0 right-1/2 translate-x-1/2 w-4 h-4 md:w-6 md:h-6 rounded-full bg-teal-400 dark:bg-teal-600 animate-[leaf-pulse_2s_ease-in-out_infinite_0.5s] transform -rotate-45 origin-top-left group-hover:scale-125 transition-transform duration-500"></div>
<div class="absolute top-1/2 left-0 -translate-y-1/2 w-4 h-4 md:w-6 md:h-6 rounded-full bg-cyan-400 dark:bg-cyan-600 animate-[leaf-pulse_2s_ease-in-out_infinite_1s] transform rotate-135 origin-top-right group-hover:scale-125 transition-transform duration-500"></div>
<div class="absolute bottom-1/2 right-0 translate-y-1/2 w-4 h-4 md:w-6 md:h-6 rounded-full bg-lime-400 dark:bg-lime-600 animate-[leaf-pulse_2s_ease-in-out_infinite_1.5s] transform -rotate-135 origin-bottom-left group-hover:scale-125 transition-transform duration-500"></div>
</div>
<style>
@keyframes spin-slow {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes spin-reverse {
0% { transform: rotate(0deg); }
100% { transform: rotate(-360deg); }
}
@keyframes pulse-slight {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.05); opacity: 0.95; }
}
@keyframes leaf-pulse {
0%, 100% { transform: translateY(0) scale(1) rotate(attr(data-rotate-initial)); opacity: 1; }
50% { transform: translateY(-5px) scale(1.1) rotate(attr(data-rotate-mid)); opacity: 0.8; }
}
/* Custom property for rotation */
.absolute:nth-of-type(3)[data-rotate-initial="45deg"] { transform: rotate(45deg); }
.absolute:nth-of-type(3)[data-rotate-mid="55deg"] { transform: rotate(55deg); }
</style>
</div>Composants associés
Industrial_Rainbow_Healthcare_Loader
Un composant de chargeur de style industriel pour les applications de santé, avec des éléments bruts, un dégradé arc-en-ciel multicolore et une réactivité totale avec prise en charge du mode sombre. Utilise des animations CSS simples pour l’effet de chargement.
Composant des chargeurs
Un composant de chargement de conception matérielle réactif avec une palette de couleurs triadiques, adapté à un portefeuille, avec prise en charge du thème sombre et de multiples éléments interactifs.
Composant des chargeurs
Un composant Loaders conçu en 3D présentant des animations de chargement avec de la profondeur et de l’engagement, des effets réactifs et la prise en charge du thème sombre à l’aide de Tailwind CSS.