Composant de chargeur skeuomorphe
Un composant de chargement professionnel et réactif avec un design skeuomorphe, une palette de couleurs complémentaire et une prise en charge du mode sombre, adapté aux sites Web d’entreprise. Comprend une barre de chargement subtile et animée à l’intérieur d’un conteneur métallique.
HTML Code
<div class="flex flex-col items-center justify-center min-h-screen p-4 bg-gray-100 dark:bg-gray-900 transition-colors duration-500">
<h2 class="text-3xl font-extrabold text-blue-800 dark:text-blue-200 mb-8 tracking-tight text-center">
Loading...
</h2>
<!-- Skeuomorphic Loader Container -->
<div class="relative w-full max-w-sm h-20 bg-gradient-to-br from-gray-300 to-gray-400 dark:from-gray-700 dark:to-gray-800 rounded-2xl shadow-[inset_2px_2px_5px_rgba(255,255,255,0.7),inset_-2px_-2px_5px_rgba(0,0,0,0.3),5px_5px_15px_rgba(0,0,0,0.2)] dark:shadow-[inset_2px_2px_5px_rgba(255,255,255,0.1),inset_-2px_-2px_8px_rgba(0,0,0,0.9),5px_5px_15px_rgba(0,0,0,0.5)] p-4 border border-solid border-gray-400 dark:border-gray-600 transition-all duration-500 animate-pulse-subtle flex flex-col justify-center items-center">
<!-- Inner Bezel/Recess -->
<div class="relative w-full h-12 bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-800 dark:to-gray-900 rounded-xl shadow-[inset_1px_1px_3px_rgba(0,0,0,0.2),inset_-1px_-1px_3px_rgba(255,255,255,0.7)] dark:shadow-[inset_1px_1px_3px_rgba(255,255,255,0.05),inset_-1px_-1px_3px_rgba(0,0,0,0.9)] p-2 transition-all duration-500">
<!-- Loading Bar Track -->
<div class="w-full h-full bg-gray-300 dark:bg-gray-700 rounded-lg overflow-hidden shadow-inner-dark transition-colors duration-500">
<!-- Loading Progress Bar (complementary color - often orange/yellow or green) -->
<div class="h-full bg-gradient-to-r from-orange-400 to-amber-500 dark:from-orange-500 dark:to-amber-600 rounded-lg animate-loading-bar origin-left shadow-[0_0_8px_rgba(251,146,60,0.8)] dark:shadow-[0_0_10px_rgba(249,115,22,0.6)]" style="width: 75%;">
</div>
</div>
</div>
<p class="absolute -bottom-6 text-sm text-gray-600 dark:text-gray-400 font-medium whitespace-nowrap overflow-hidden">
Preparing resources...
</p>
</div>
<style>
@keyframes loading-bar {
0% { width: 0%; transform: translateX(-100%); opacity: 0.5; }
25% { width: 50%; transform: translateX(0%); opacity: 0.8; }
50% { width: 100%; opacity: 1; }
75% { width: 50%; transform: translateX(50%); opacity: 0.8; }
100% { width: 0%; transform: translateX(100%); opacity: 0.5; }
}
.animate-loading-bar {
animation: loading-bar 2s ease-in-out infinite alternate;
}
@keyframes pulse-subtle {
0%, 100% { transform: scale(1); filter: brightness(1); }
50% { transform: scale(1.01); filter: brightness(1.05); }
}
.animate-pulse-subtle {
animation: pulse-subtle 3s ease-in-out infinite;
}
/* Custom utility for inner dark shadow to mimic depth */
.shadow-inner-dark {
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4);
}
.dark .shadow-inner-dark {
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.8);
}
</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.
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.
Chargeur de neumorphisme
Un composant de chargeur de style Neumorphism avec des effets réactifs et une prise en charge du thème sombre utilisant Tailwind CSS. Aucun JavaScript n’est nécessaire. Utilise des ombres subtiles pour créer un effet extrudé à partir de l’arrière-plan. Mode sombre pris en charge avec CSS.