Barre de progression arc-en-ciel dégradée pour la photographie
Un composant de barre de progression complexe et réactif pour les portfolios de photographie, doté d’un design arc-en-ciel dégradé multicolore et d’une prise en charge du mode sombre. Idéal pour présenter le chargement de photos ou la progression de la galerie.
HTML Code
<div class="p-4 sm:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen flex items-center justify-center font-sans">
<div class="w-full max-w-2xl bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden">
<div class="p-6 sm:p-8">
<h2 class="text-2xl sm:text-3xl font-extrabold text-gray-900 dark:text-white mb-4 text-center">
Loading Your Masterpiece Gallery
</h2>
<p class="text-sm sm:text-base text-gray-600 dark:text-gray-300 mb-8 text-center">
Please wait while we prepare your high-resolution photographs.
</p>
<div class="relative h-6 sm:h-8 rounded-full bg-gray-200 dark:bg-gray-700 overflow-hidden shadow-inner mb-6">
<div class="absolute inset-0 rounded-full animate-progress-rainbow-full" style="width: 75%;">
<div class="h-full rounded-full" style="background-image: linear-gradient(to right, #ef4444, #f97316, #eab308, #84cc16, #22c55e, #06b6d4, #3b82f6, #6366f1, #a855f7, #ec4899);"></div>
</div>
<div class="absolute inset-0 flex items-center justify-center">
<span class="text-xs sm:text-sm font-semibold text-white dark:text-gray-100 mix-blend-difference">75% Complete</span>
</div>
</div>
<div class="text-center text-sm text-gray-500 dark:text-gray-400">
Preparing image: <span class="font-medium">'Sunset_Over_Mountains_HDR_001.jpg'</span>
</div>
<div class="mt-8 grid grid-cols-2 sm:grid-cols-4 gap-4">
<div class="relative w-full aspect-square rounded-lg overflow-hidden border-2 border-transparent hover:border-blue-500 dark:hover:border-blue-400 transition-all duration-300">
<img src="https://picsum.photos/id/1015/300/300" alt="Placeholder image" class="w-full h-full object-cover" loading="lazy">
<div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end p-2 opacity-0 hover:opacity-100 transition-opacity duration-300">
<p class="text-white text-xs font-semibold">Image 1</p>
</div>
<div class="absolute bottom-2 right-2 text-white text-xs bg-black/50 px-2 py-1 rounded-full">✓</div>
</div>
<div class="relative w-full aspect-square rounded-lg overflow-hidden border-2 border-transparent hover:border-blue-500 dark:hover:border-blue-400 transition-all duration-300">
<img src="https://picsum.photos/id/1084/300/300" alt="Placeholder image" class="w-full h-full object-cover" loading="lazy">
<div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end p-2 opacity-0 hover:opacity-100 transition-opacity duration-300">
<p class="text-white text-xs font-semibold">Image 2</p>
</div>
<div class="absolute bottom-2 right-2 text-white text-xs bg-black/50 px-2 py-1 rounded-full">✓</div>
</div>
<div class="relative w-full aspect-square rounded-lg overflow-hidden border-2 border-blue-500 dark:border-blue-400 transition-all duration-300 shadow-md animate-pulse">
<img src="https://picsum.photos/id/107/300/300" alt="Placeholder image" class="w-full h-full object-cover grayscale" loading="lazy">
<div class="absolute inset-0 flex items-center justify-center bg-black/60">
<div class="w-8 h-8 sm:w-10 sm:h-10 border-4 border-t-4 border-white border-t-white-500 rounded-full animate-spin"></div>
</div>
<div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end p-2 opacity-0 hover:opacity-100 transition-opacity duration-300">
<p class="text-white text-xs font-semibold">Image 3</p>
</div>
</div>
<div class="relative w-full aspect-square rounded-lg overflow-hidden border-2 border-transparent hover:border-blue-500 dark:hover:border-blue-400 transition-all duration-300 opacity-60">
<img src="https://picsum.photos/id/1069/300/300" alt="Placeholder image" class="w-full h-full object-cover" loading="lazy">
<div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end p-2 opacity-0 hover:opacity-100 transition-opacity duration-300">
<p class="text-white text-xs font-semibold">Image 4</p>
</div>
</div>
</div>
</div>
</div>
</div>
<style>
@keyframes progress-rainbow-full {
0% {
background-position: 0% 50%;
}
100% {
background-position: 100% 50%;
}
}
.animate-progress-rainbow-full {
background-size: 200% 100%;
animation: progress-rainbow-full 2s ease-in-out infinite alternate;
}
</style>Composants associés
Barre de progression
Composant de barre de progression avec conception de micro-interactions. Comprend la prise en charge des effets réactifs et des thèmes sombres en utilisant uniquement HTML et CSS (Tailwind CSS).
ProgressBarComponent
Un composant de barre de progression simple, propre et réactif avec des couleurs néon/électriques pour les sites Web d’alimentation/restaurants, avec prise en charge du mode sombre et conception typographique suisse/internationale.
Composant de la barre de progression Bauhaus
Un composant de barre de progression de complexité modérée, réactif, inspiré du Bauhaus, adapté aux plates-formes de divertissement/médias, avec des neutres froids et la prise en charge du mode sombre.