Composants Barre de progression Brutalist_ProgressBar

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.

Aperçu

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

Barre de progression skeuomorphe

Composant de barre de progression skeuomorphe pour les portfolios, doté d’un schéma de couleurs monochromatique et d’un design complexe et interactif avec prise en charge du mode réactif et sombre à l’aide de Tailwind CSS.

Ouvrir

Barre de progression terreuse de conception matérielle

Une barre de progression inspirée du Material Design avec des tons de terre, adaptée aux interfaces de médias sociaux. Il est réactif et inclut la prise en charge du mode sombre à l’aide de Tailwind CSS.

Ouvrir

Barre de progression minimaliste

Un composant de barre de progression au design minimaliste et plat aux couleurs pastel, adapté aux sites Web professionnels d’entreprise ou d’entreprise. Il a un design réactif et prend en charge le mode sombre à l’aide de Tailwind CSS.

Ouvrir