Playful_Finance_Loader
Un composant de chargement ludique et simple pour les interfaces finance/banque, avec des éléments neutres et arrondis. Entièrement réactif avec prise en charge du mode sombre.
HTML Code
<div class="flex items-center justify-center min-h-screen bg-gray-50 dark:bg-gray-900 p-4">
<div class="max-w-md w-full bg-white dark:bg-gray-800 rounded-3xl shadow-xl p-8 transition-colors duration-300">
<div class="flex flex-col items-center justify-center space-y-6">
<div class="relative w-24 h-24">
<!-- Outer ring -->
<div class="absolute inset-0 rounded-full border-4 border-dashed border-gray-200 dark:border-gray-700 animate-spin-slow opacity-75"></div>
<!-- Inner spinning circles -->
<div class="absolute inset-4 rounded-full border-4 border-solid border-blue-300 dark:border-blue-500 animate-spin opacity-90"></div>
<div class="absolute inset-4 rounded-full border-4 border-solid border-gray-400 dark:border-gray-600 animate-spin-reverse opacity-80"></div>
<!-- Center icon/text -->
<div class="absolute inset-0 flex items-center justify-center">
<svg class="w-12 h-12 text-blue-400 dark:text-blue-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M.636 12l.707-.707M12 21v-1m-6.364-1.636l.707-.707M3 12H2m1-.707l-.707-.707m0 0a2 2 0 112.828 2.828l-2.828-2.828zM12 12a3 3 0 100-6 3 3 0 000 6z"></path>
</svg>
</div>
</div>
<h2 class="text-xl sm:text-2xl font-semibold text-gray-700 dark:text-gray-200 text-center">
Processing Transaction...
</h2>
<p class="text-sm sm:text-base text-gray-500 dark:text-gray-400 text-center max-w-xs">
Please wait while we securely process your request. This may take a few moments.
</p>
<div class="w-full bg-gray-100 dark:bg-gray-700 rounded-full h-2.5 sm:h-3 overflow-hidden mt-4 shadow-inner">
<div class="bg-blue-400 dark:bg-blue-600 h-full rounded-full transition-all duration-1000 ease-in-out" style="width: 75%;">
</div>
</div>
</div>
</div>
<style>
@keyframes spin-slow {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes spin-reverse {
from { transform: rotate(0deg); }
to { transform: rotate(-360deg); }
}
.animate-spin-slow {
animation: spin-slow 3s linear infinite;
}
.animate-spin-reverse {
animation: spin-reverse 1.5s linear infinite;
}
</style>
</div>Composants associés
Composant de chargement organique inspiré de la nature
Un composant de chargement à contraste élevé, inspiré de la nature, adapté aux sites Web d’entreprise et d’entreprise, avec des lignes fluides et une prise en charge du mode sombre.
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.
Organic_Nature_Inspired_Food_Loader
Un composant de chargement de complexité modérée pour les sites Web d’alimentation/restaurant, doté d’un design organique, inspiré de la nature, avec des couleurs sourdes et une réactivité totale, y compris la prise en charge du mode sombre.