NeonGlowWeatherLoader
Un composant simple et réactif avec des effets de néon, une base en noir et blanc et une couleur d’accentuation vibrante, y compris la prise en charge du mode sombre.
HTML Code
<div class="flex items-center justify-center min-h-screen bg-gray-900 dark:bg-black p-4">
<div class="relative flex flex-col items-center justify-center w-56 h-56 sm:w-64 sm:h-64 md:w-80 md:h-80 rounded-full bg-gray-800 dark:bg-gray-950 shadow-lg glow-border animate-pulse-border">
<div class="relative w-40 h-40 sm:w-48 sm:h-48 md:w-60 md:h-60 rounded-full flex items-center justify-center bg-gray-700 dark:bg-gray-900 overflow-hidden">
<!-- Inner Glow Effect -->
<div class="absolute inset-0 rounded-full z-0 pointer-events-none animate-spin-slow" style="background: conic-gradient(from 0deg, transparent 0%, transparent 25%, #00FFFF 50%, transparent 75%, transparent 100%); filter: blur(10px); opacity: 0.7;"></div>
<div class="absolute inset-0 rounded-full z-0 pointer-events-none animate-spin-reverse-slow" style="background: conic-gradient(from 180deg, transparent 0%, transparent 25%, #FF00FF 50%, transparent 75%, transparent 100%); filter: blur(10px); opacity: 0.7;"></div>
<!-- Main Weather Icon/Text Container -->
<div class="relative z-10 text-white dark:text-gray-200 text-6xl md:text-7xl font-bold flex flex-col items-center justify-center leading-none animate-pulse-text">
<svg class="w-16 h-16 sm:w-20 sm:h-20 md:w-24 md:h-24 text-cyan-400 dark:text-fuchsia-400 drop-shadow-lg" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="glow">
<feGaussianBlur stdDeviation="2.5" result="coloredBlur"/>
<feMerge>
<feMergeNode in="coloredBlur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 15a4 4 0 004 4h9a5 5 0 00-.104-10L20 9l-2.071-2.071A5 5 0 0013.818 3H10a4 4 0 00-4 4v2.586M3 15V9m0 6a2 2 0 002 2h3.28m7.295-8.586A8.995 8.995 0 0018 9v2.586M21 12H9" filter="url(#glow)"></path>
</svg>
<span class="mt-2 text-2xl sm:text-3xl font-light text-cyan-300 dark:text-fuchsia-300 drop-shadow-md">Loading...</span>
</div>
</div>
<p class="mt-6 text-gray-400 dark:text-gray-500 text-sm sm:text-base tracking-wide animate-fade-in">Fetching climate data</p>
</div>
</div>
<style>
@keyframes pulse-border {
0% {
box-shadow: 0 0 5px rgba(0, 255, 255, 0.5), 0 0 10px rgba(255, 0, 255, 0.5), inset 0 0 5px rgba(0, 255, 255, 0.5);
}
50% {
box-shadow: 0 0 15px rgba(0, 255, 255, 0.8), 0 0 30px rgba(255, 0, 255, 0.8), inset 0 0 15px rgba(0, 255, 255, 0.8);
}
100% {
box-shadow: 0 0 5px rgba(0, 255, 255, 0.5), 0 0 10px rgba(255, 0, 255, 0.5), inset 0 0 5px rgba(0, 255, 255, 0.5);
}
}
@keyframes spin-slow {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes spin-reverse-slow {
from {
transform: rotate(360deg);
}
to {
transform: rotate(0deg);
}
}
@keyframes pulse-text {
0%, 100% {
opacity: 1;
transform: scale(1);
}
50% {
opacity: 0.8;
transform: scale(1.05);
}
}
@keyframes fade-in {
0% { opacity: 0; transform: translateY(10px); }
100% { opacity: 1; transform: translateY(0); }
}
.animate-pulse-border {
animation: pulse-border 2s infinite ease-in-out;
}
.animate-spin-slow {
animation: spin-slow 10s linear infinite;
}
.animate-spin-reverse-slow {
animation: spin-reverse-slow 10s linear infinite;
}
.animate-pulse-text {
animation: pulse-text 2s ease-in-out infinite;
}
.animate-fade-in {
animation: fade-in 1s ease-out forwards;
animation-delay: 0.5s; /* Delay for better visual flow */
opacity: 0; /* Start hidden */
}
/* Dark mode specific glow colors */
@media (prefers-color-scheme: dark) {
.glow-border {
box-shadow: 0 0 5px rgba(255, 0, 255, 0.5), 0 0 10px rgba(0, 255, 255, 0.5), inset 0 0 5px rgba(255, 0, 255, 0.5);
}
/* The background of the glow uses inline style for conic-gradient, so it will not directly apply to the dark mode via this class.
However, the accent colors for text and SVG are handled by Tailwind's dark: prefix. */
}
</style>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 chargeurs conçu dans le style Material Design, avec des effets réactifs et une prise en charge du thème sombre à l’aide de Tailwind CSS.
Memphis_Food_Loader
Un composant de chargeur simple et réactif sur le thème de l’alimentation avec des éléments de design Memphis, des couleurs neutres chaudes et une prise en charge du mode sombre, adapté aux sites Web de livraison de nourriture et de restaurants.