Brutalist_ProgressBar
Un composant de barre de progression à contraste élevé, de style brutaliste, adapté aux plateformes de marché, avec des couleurs vives et une mise en page simple, avec une réactivité totale et une prise en charge du mode sombre.
HTML Code
<div class="p-4 sm:p-6 md:p-8 bg-gray-100 dark:bg-zinc-900 min-h-screen flex items-center justify-center font-mono">
<div class="w-full max-w-xl border-4 border-black dark:border-white shadow-xl dark:shadow-none bg-white dark:bg-black p-4 sm:p-6 md:p-8 relative overflow-hidden">
<!-- Top-left overlay 'GLITCH' effect -->
<div class="absolute -top-2 -left-2 text-6xl md:text-8xl font-black text-red-500 opacity-20 transform -rotate-12 select-none pointer-events-none z-0 hidden sm:block">
GLITCH
</div>
<h2 class="text-2xl sm:text-3xl md:text-4xl font-black text-black dark:text-white mb-6 uppercase tracking-tighter relative z-10">
Order Progress <span class="text-red-600 dark:text-yellow-400">STATUS</span>
</h2>
<div class="mb-8 relative z-10">
<p class="text-lg sm:text-xl font-bold text-black dark:text-white mb-2 uppercase">
Shipment: <span class="text-red-600 dark:text-yellow-400">75%</span> Complete
</p>
<div class="w-full h-8 sm:h-10 bg-gray-300 dark:bg-zinc-700 border-4 border-black dark:border-white relative overflow-hidden">
<!-- Progress bar fill -->
<div class="h-full bg-red-600 dark:bg-yellow-400" style="width: 75%;">
<div class="absolute inset-0 bg-gradient-to-r from-transparent via-black/10 dark:via-white/10 to-transparent animate-pulse"></div>
</div>
<!-- Glitch line effect - CSS animated, but here as classes with high contrast -->
<div class="absolute inset-0 border-x-4 border-red-800 dark:border-yellow-600 opacity-25 animate-glitch-line-1" style="animation-duration: 2s;"></div>
<div class="absolute inset-0 border-x-4 border-black dark:border-white opacity-25 animate-glitch-line-2" style="animation-duration: 3s;"></div>
</div>
<p class="text-sm sm:text-base text-gray-700 dark:text-gray-300 mt-2 font-bold">Next step: Packaging (Expected today)</p>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4 relative z-10">
<div class="p-4 border-4 border-black dark:border-white dark:bg-zinc-800 bg-gray-200">
<h3 class="text-xl font-bold text-black dark:text-white mb-2 uppercase">Vendor A</h3>
<div class="w-full h-6 bg-gray-300 dark:bg-zinc-700 border-2 border-black dark:border-white relative">
<div class="h-full bg-blue-600 dark:bg-green-400" style="width: 90%;"></div>
</div>
<p class="text-sm text-gray-700 dark:text-gray-300 mt-1">Items Shipped: 90%</p>
</div>
<div class="p-4 border-4 border-black dark:border-white dark:bg-zinc-800 bg-gray-200">
<h3 class="text-xl font-bold text-black dark:text-white mb-2 uppercase">Vendor B</h3>
<div class="w-full h-6 bg-gray-300 dark:bg-zinc-700 border-2 border-black dark:border-white relative">
<div class="h-full bg-purple-600 dark:bg-cyan-400" style="width: 40%;"></div>
</div>
<p class="text-sm text-gray-700 dark:text-gray-300 mt-1">Items Shipped: 40%</p>
</div>
</div>
<!-- Bottom-right overlay 'VOID' effect -->
<div class="absolute -bottom-2 -right-2 text-6xl md:text-8xl font-black text-black dark:text-gray-700 opacity-10 transform rotate-12 select-none pointer-events-none z-0 hidden sm:block">
VOID
</div>
</div>
<style>
/* Basic keyframes for the glitch lines, adjust values for more or less chaos */
@keyframes glitch-line-1 {
0%, 100% { transform: translateY(0); opacity: 0.25; }
20% { transform: translateY(5px); opacity: 0.5; }
40% { transform: translateY(-5px); opacity: 0.1; }
60% { transform: translateY(3px); opacity: 0.4; }
80% { transform: translateY(-3px); opacity: 0.2; }
}
@keyframes glitch-line-2 {
0%, 100% { transform: translateY(0); opacity: 0.25; }
15% { transform: translateY(-7px); opacity: 0.3; }
35% { transform: translateY(7px); opacity: 0.15; }
55% { transform: translateY(-2px); opacity: 0.4; }
75% { transform: translateY(4px); opacity: 0.2; }
}
.animate-glitch-line-1 { animation: glitch-line-1 2.5s infinite step-end; }
.animate-glitch-line-2 { animation: glitch-line-2 3s infinite step-end; }
</style>
</div>Composants associés
Composant de la barre de progression
Un composant de barre de progression réactif conçu avec des éléments 3D, utilisant une palette de couleurs analogue adaptée au commerce électronique, avec prise en charge du mode sombre
Barre de progression néo-rétro cyberpunk
Un composant de barre de progression de complexité modérée avec une esthétique cyberpunk et néo-rétro, des arrière-plans sombres et des couleurs d’accent vintage discrètes, conçu pour les plateformes de divertissement/médias. Il dispose d’un affichage de progression segmenté et est entièrement réactif avec la prise en charge du mode sombre.
Composant de la barre de progression 3D
Un composant de barre de progression réactif conçu pour les interfaces de réseaux sociaux, avec un effet 3D, une palette de couleurs monochromatiques et la prise en charge du mode sombre, construit à l’aide de Tailwind CSS.