Rechercher des composants

Catégories

Composants Barre de progression

Barre de progression

Indicateur indiquant la progression de l’achèvement

Barre de progression professionnelle du commerce électronique

Il s’agit d’un composant complexe et réactif de la barre de progression conçu pour le commerce électronique, avec une palette de couleurs automnales (oranges riches, bruns, bordeaux) et prenant en charge le mode sombre. Il offre un aspect épuré et professionnel pour les environnements d’entreprise.

Ouvrir Aperçu

                <div class="bg-white dark:bg-gray-800 p-6 sm:p-8 md:p-10 rounded-lg shadow-xl max-w-4xl mx-auto font-sans text-gray-800 dark:text-gray-200 transition-colors duration-300">
  <h2 class="text-2xl sm:text-3xl font-bold mb-6 text-center text-gray-900 dark:text-white">Your Order Progress</h2>

  <div class="flex justify-between items-center mb-4 text-sm sm:text-base font-semibold text-gray-700 dark:text-gray-300">
    <span>Order ID: <span class="font-medium text-gray-900 dark:text-white">#CUST-2023-98765</span></span>
    <span>Estimated Delivery: <span class="font-medium text-gray-900 dark:text-white">Oct 26, 2023</span></span>
  </div>

  <nav class="flex items-center justify-between relative mb-8">
    <div class="absolute left-0 top-1/2 -mt-0.5 w-full h-1 bg-gray-200 dark:bg-gray-700 rounded-full z-0"></div>
    <div class="absolute left-0 top-1/2 -mt-0.5 w-3/4 rounded-full h-1 bg-orange-700 dark:bg-orange-600 transition-all duration-700 ease-out z-10"></div>

    <ol class="flex justify-between w-full relative z-20">
      <li class="flex flex-col items-center flex-1 min-w-0 pr-2">
        <div class="w-9 h-9 sm:w-10 sm:h-10 rounded-full flex items-center justify-center bg-orange-700 dark:bg-orange-600 text-white font-bold text-lg mb-2 sm:mb-3 shadow-md border-2 border-orange-800 dark:border-orange-700">
          1
        </div>
        <span class="text-center text-xs sm:text-sm font-medium text-gray-900 dark:text-white leading-tight">Order Placed</span>
      </li>
      <li class="flex flex-col items-center flex-1 min-w-0 px-1">
        <div class="w-9 h-9 sm:w-10 sm:h-10 rounded-full flex items-center justify-center bg-orange-700 dark:bg-orange-600 text-white font-bold text-lg mb-2 sm:mb-3 shadow-md border-2 border-orange-800 dark:border-orange-700">
          2
        </div>
        <span class="text-center text-xs sm:text-sm font-medium text-ellipsis overflow-hidden whitespace-nowrap">Processing</span>
      </li>
      <li class="flex flex-col items-center flex-1 min-w-0 px-1">
        <div class="w-9 h-9 sm:w-10 sm:h-10 rounded-full flex items-center justify-center bg-orange-700 dark:bg-orange-600 text-white font-bold text-lg mb-2 sm:mb-3 shadow-md border-2 border-orange-800 dark:border-orange-700">
          3
        </div>
        <span class="text-center text-xs sm:text-sm font-medium text-ellipsis overflow-hidden whitespace-nowrap">Shipped</span>
      </li>
      <li class="flex flex-col items-center flex-1 min-w-0 pl-2">
        <div class="w-9 h-9 sm:w-10 sm:h-10 rounded-full flex items-center justify-center bg-gray-300 dark:bg-gray-600 text-gray-600 dark:text-gray-300 font-bold text-lg mb-2 sm:mb-3 border-2 border-gray-400 dark:border-gray-500">
          4
        </div>
        <span class="text-center text-xs sm:text-sm font-medium text-gray-500 dark:text-gray-400 leading-tight">Out for Delivery</span>
      </li>
      <li class="flex flex-col items-center flex-1 min-w-0 pl-2">
        <div class="w-9 h-9 sm:w-10 sm:h-10 rounded-full flex items-center justify-center bg-gray-300 dark:bg-gray-600 text-gray-600 dark:text-gray-300 font-bold text-lg mb-2 sm:mb-3 border-2 border-gray-400 dark:border-gray-500">
          5
        </div>
        <span class="text-center text-xs sm:text-sm font-medium text-gray-500 dark:text-gray-400 leading-tight">Delivered</span>
      </li>
    </ol>
  </nav>

  <div class="bg-orange-50 dark:bg-gray-700 p-4 sm:p-5 rounded-lg border border-orange-200 dark:border-gray-600 flex flex-col sm:flex-row items-start sm:items-center justify-between transition-colors duration-300">
    <div class="flex items-start sm:items-center mb-3 sm:mb-0">
      <img class="w-12 h-12 sm:w-16 sm:h-16 rounded-lg mr-4 object-cover border border-orange-300 dark:border-gray-500" src="https://picsum.photos/100/100?random=1" alt="Product Image">
      <div>
        <p class="font-semibold text-base sm:text-lg text-brown-900 dark:text-white mb-0.5">Autumn Comfort Scarf</p>
        <p class="text-sm text-gray-700 dark:text-gray-300">Qty: 1 | Color: Burgundy</p>
        <p class="text-sm font-bold text-orange-800 dark:text-orange-400">$29.99</p>
      </div>
    </div>
    <div class="text-right sm:text-left">
      <p class="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-1">Current Status:</p>
      <p class="text-base font-bold text-orange-700 dark:text-orange-500">Shipped</p>
      <p class="text-xs text-gray-600 dark:text-gray-400">Last updated: Oct 24, 2023, 10:30 AM PST</p>
    </div>
  </div>

  <div class="mt-8 text-center">
    <button class="bg-orange-700 hover:bg-orange-800 dark:bg-orange-600 dark:hover:bg-orange-700 text-white font-bold py-2 px-6 rounded-full inline-flex items-center transition duration-300 ease-in-out transform hover:scale-105 shadow-md">
      <svg class="w-5 h-5 mr-2" 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 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
      View Order Details
    </button>
  </div>
</div>

Industrial_Travel_Progress_Bar

Un composant simple de barre de progression de style industriel pour les sites Web de voyage/tourisme, avec une palette de couleurs violet/violet et une réactivité totale avec prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="p-4 sm:p-6 md:p-8 bg-gray-50 dark:bg-gray-900 min-h-screen flex items-center justify-center font-sans">

  <div class="w-full max-w-xl bg-gray-200 dark:bg-gray-800 rounded-lg shadow-md overflow-hidden border border-gray-300 dark:border-gray-700">
    <div class="p-4 sm:p-5 md:p-6 bg-gray-300 dark:bg-gray-700 border-b border-gray-400 dark:border-gray-600">
      <h2 class="text-lg sm:text-xl font-bold text-gray-800 dark:text-gray-100 uppercase tracking-wide">Your Travel Progress</h2>
      <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">Booking steps completed</p>
    </div>

    <div class="p-4 sm:p-5 md:p-6">

      <div class="mb-4">
        <label for="progress-bar" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Booking Confirmation (75%)</label>
        <div class="w-full bg-violet-200 dark:bg-violet-950 rounded-full h-3 relative overflow-hidden">
          <div class="bg-violet-700 dark:bg-violet-400 h-full rounded-full transition-all duration-500 ease-out" style="width: 75%;"></div>
          <span class="absolute inset-0 flex items-center justify-center text-xs font-semibold text-white dark:text-gray-900" style="text-shadow: 0 0 2px rgba(0,0,0,0.5);"></span>
        </div>
      </div>

      <div class="mb-4">
        <label for="progress-bar" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Flight Selection (Complete)</label>
        <div class="w-full bg-violet-200 dark:bg-violet-950 rounded-full h-3 relative overflow-hidden">
          <div class="bg-violet-700 dark:bg-violet-400 h-full rounded-full transition-all duration-500 ease-out" style="width: 100%;"></div>
          <svg class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 h-3 w-3 text-white dark:text-gray-900" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
          </svg>
        </div>
      </div>

      <div class="mb-4 last:mb-0">
        <label for="progress-bar" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Accommodation (50%)</label>
        <div class="w-full bg-violet-200 dark:bg-violet-950 rounded-full h-3 relative overflow-hidden">
          <div class="bg-violet-700 dark:bg-violet-400 h-full rounded-full transition-all duration-500 ease-out" style="width: 50%;"></div>
          <span class="absolute inset-0 flex items-center justify-center text-xs font-semibold text-white dark:text-gray-900" style="text-shadow: 0 0 2px rgba(0,0,0,0.5);"></span>
        </div>
      </div>

    </div>
  </div>

</div>

Glassmorphism_EarthTones_ProgressBar_ForumComponent

Un composant de barre de progression réactif avec des tons de terre, adapté aux forums ou aux plateformes communautaires. Comprend des éléments translucides givrés ressemblant à du verre dépoli avec des effets de flou et la prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="p-4 sm:p-6 lg:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen flex items-start justify-center font-sans">

  <div class="w-full max-w-2xl bg-white/30 dark:bg-gray-800/60 backdrop-blur-lg rounded-xl shadow-lg ring-1 ring-black/5 dark:ring-white/10 overflow-hidden">
    
    <!-- Component Header -->
    <div class="px-6 py-4 border-b border-gray-200/50 dark:border-gray-700/50 flex items-center justify-between">
      <h2 class="text-lg sm:text-xl font-semibold text-gray-800 dark:text-gray-100">Community Engagement Progress</h2>
      <span class="text-sm text-gray-600 dark:text-gray-400">Level 3 Enthusiast</span>
    </div>

    <!-- Progress Bar Section -->
    <div class="p-6 space-y-4">

      <!-- Individual Progress Item: Discussions -->
      <div class="space-y-2">
        <div class="flex justify-between items-center">
          <span class="text-sm font-medium text-gray-700 dark:text-gray-200">Discussions Created</span>
          <span class="text-sm text-gray-600 dark:text-gray-400">15 / 20</span>
        </div>
        <div class="relative h-2 bg-gray-200/70 dark:bg-gray-700/70 rounded-full overflow-hidden shadow-inner-sm">
          <div class="absolute top-0 left-0 h-full w-[75%] rounded-full bg-emerald-600/70 dark:bg-emerald-500/70 shadow-md" style="width: 75%;"></div>
        </div>
      </div>

      <!-- Individual Progress Item: Replies -->
      <div class="space-y-2">
        <div class="flex justify-between items-center">
          <span class="text-sm font-medium text-gray-700 dark:text-gray-200">Replies Posted</span>
          <span class="text-sm text-gray-600 dark:text-gray-400">45 / 50</span>
        </div>
        <div class="relative h-2 bg-gray-200/70 dark:bg-gray-700/70 rounded-full overflow-hidden shadow-inner-sm">
          <div class="absolute top-0 left-0 h-full w-[90%] rounded-full bg-orange-600/70 dark:bg-orange-500/70 shadow-md" style="width: 90%;"></div>
        </div>
      </div>

      <!-- Individual Progress Item: Upvotes Received -->
      <div class="space-y-2">
        <div class="flex justify-between items-center">
          <span class="text-sm font-medium text-gray-700 dark:text-gray-200">Upvotes Received</span>
          <span class="text-sm text-gray-600 dark:text-gray-400">80 / 100</span>
        </div>
        <div class="relative h-2 bg-gray-200/70 dark:bg-gray-700/70 rounded-full overflow-hidden shadow-inner-sm">
          <div class="absolute top-0 left-0 h-full w-[80%] rounded-full bg-amber-600/70 dark:bg-amber-500/70 shadow-md" style="width: 80%;"></div>
        </div>
      </div>

      <!-- Individual Progress Item: Badges Earned -->
      <div class="space-y-2">
        <div class="flex justify-between items-center">
          <span class="text-sm font-medium text-gray-700 dark:text-sky-200">Badges Earned</span>
          <span class="text-sm text-gray-600 dark:text-gray-400">8 / 10</span>
        </div>
        <div class="relative h-2 bg-gray-200/70 dark:bg-gray-700/70 rounded-full overflow-hidden shadow-inner-sm">
          <div class="absolute top-0 left-0 h-full w-[80%] rounded-full bg-sky-600/70 dark:bg-sky-500/70 shadow-md" style="width: 80%;"></div>
        </div>
      </div>

    </div>

    <!-- Footer / Call to action -->
    <div class="px-6 py-4 bg-white/20 dark:bg-gray-800/50 border-t border-gray-200/50 dark:border-gray-700/50 flex flex-col sm:flex-row items-center justify-between gap-y-2">
      <p class="text-sm text-gray-700 dark:text-gray-300 text-center sm:text-left">Keep contributing to reach the next milestone!</p>
      <button type="button" class="px-4 py-2 bg-brown-700/70 dark:bg-brown-600/70 text-white text-sm font-medium rounded-lg hover:bg-brown-800/70 dark:hover:bg-brown-700/70 focus:outline-none focus:ring-2 focus:ring-brown-500/70 focus:ring-offset-2 dark:focus:ring-offset-gray-900 transition-colors duration-200 ease-in-out shadow">
        View All Achievements
      </button>
    </div>

  </div>
</div>

Barre de progression de fitness sportif en niveaux de gris 3D

Un composant complexe de barre de progression en 3D en niveaux de gris conçu pour les applications de sport et de fitness, montrant la progression de l’entraînement avec profondeur et engagement visuel. Il inclut la prise en charge du mode sombre et est entièrement réactif.

Ouvrir Aperçu

                <div class="p-4 sm:p-6 md: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-4xl bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden animate-fade-in-up">
    <div class="p-6 sm:p-8 md:p-10">
      <h2 class="text-3xl sm:text-4xl font-extrabold text-gray-900 dark:text-white mb-6 text-center tracking-tight">Daily Training Progress</h2>

      <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
        <!-- Overall Progress Section -->
        <div class="bg-gray-50 dark:bg-gray-700 p-6 rounded-lg shadow-inner border border-gray-200 dark:border-gray-600 relative overflow-hidden group">
          <div class="absolute -inset-1 bg-gradient-to-br from-gray-200 via-gray-300 to-gray-400 dark:from-gray-600 dark:via-gray-700 dark:to-gray-800 rounded-lg blur opacity-0 group-hover:opacity-100 transition duration-300 pointer-events-none"></div>
          <div class="relative z-10">
            <p class="text-sm uppercase font-bold text-gray-600 dark:text-gray-300 mb-2">Overall Goal</p>
            <h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">Week 3/12 Training Cycle</h3>

            <div class="w-full bg-gray-200 dark:bg-gray-600 rounded-full h-8 sm:h-10 relative overflow-hidden shadow-inner">
              <div class="absolute inset-0 bg-gradient-to-r from-gray-400 to-gray-500 dark:from-gray-500 dark:to-gray-400 rounded-full h-full transform transition-transform duration-1000 ease-out" style="width: 65%;">
                <div class="absolute inset-0 bg-white opacity-20 dark:bg-gray-900 dark:opacity-20 blend-overlay"></div>
              </div>
              <span class="absolute inset-0 flex items-center justify-center text-sm sm:text-base font-bold text-gray-900 dark:text-white mix-blend-difference">65% Complete</span>
            </div>

            <div class="mt-4 text-center">
              <button class="px-4 py-2 bg-gray-800 dark:bg-gray-200 text-white dark:text-gray-900 font-semibold rounded-md shadow-lg transform transition duration-300 hover:scale-105 hover:bg-gray-900 dark:hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 dark:focus:ring-gray-400">
                View Full Roadmap
              </button>
            </div>
          </div>
        </div>

        <!-- Daily Progress Section -->
        <div class="bg-gray-50 dark:bg-gray-700 p-6 rounded-lg shadow-inner border border-gray-200 dark:border-gray-600 relative overflow-hidden group">
          <div class="absolute -inset-1 bg-gradient-to-br from-gray-200 via-gray-300 to-gray-400 dark:from-gray-600 dark:via-gray-700 dark:to-gray-800 rounded-lg blur opacity-0 group-hover:opacity-100 transition duration-300 pointer-events-none"></div>
          <div class="relative z-10">
            <p class="text-sm uppercase font-bold text-gray-600 dark:text-gray-300 mb-2">Daily Target</p>
            <h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">Today's Session: Legs & Core</h3>

            <div class="w-full bg-gray-200 dark:bg-gray-600 rounded-full h-8 sm:h-10 relative overflow-hidden shadow-inner">
              <div class="absolute inset-0 bg-gradient-to-r from-gray-400 to-gray-500 dark:from-gray-500 dark:to-gray-400 rounded-full h-full transform transition-transform duration-1000 ease-out" style="width: 80%;">
                <div class="absolute inset-0 bg-white opacity-20 dark:bg-gray-900 dark:opacity-20 blend-overlay"></div>
              </div>
              <span class="absolute inset-0 flex items-center justify-center text-sm sm:text-base font-bold text-gray-900 dark:text-white mix-blend-difference">80% Done</span>
            </div>

            <div class="mt-4 text-center">
              <button class="px-4 py-2 bg-gray-800 dark:bg-gray-200 text-white dark:text-gray-900 font-semibold rounded-md shadow-lg transform transition duration-300 hover:scale-105 hover:bg-gray-900 dark:hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 dark:focus:ring-gray-400">
                Log Workout
              </button>
            </div>
          </div>
        </div>
      </div>

      <!-- Individual Metrics Progress Bars -->
      <div class="mb-8">
        <h3 class="text-xl sm:text-2xl font-bold text-gray-900 dark:text-white mb-4 text-center">Key Performance Indicators</h3>
        <div class="space-y-6">

          <!-- Metric 1: Strength -->
          <div class="relative bg-gray-100 dark:bg-gray-700 rounded-full p-1 shadow-md shadow-inset-dark overflow-hidden">
            <div class="absolute inset-0 bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-600 dark:to-gray-700 rounded-full transform -skew-y-3 blur-sm"></div>
            <div class="relative z-10 w-full bg-white dark:bg-gray-800 rounded-full h-10 shadow-inner overflow-hidden">
              <div class="absolute inset-0 bg-gradient-to-r from-gray-400 to-gray-500 dark:from-gray-500 dark:to-gray-600 rounded-full h-full transform transition-transform duration-1000 ease-out" style="width: 75%;">
                <div class="absolute inset-0 bg-white opacity-20 dark:bg-gray-900 dark:opacity-20 blend-overlay"></div>
              </div>
              <div class="absolute inset-0 flex items-center justify-between px-4 text-sm font-semibold text-gray-900 dark:text-white mix-blend-difference">
                <span>Strength</span>
                <span>75%</span>
              </div>
            </div>
          </div>

          <!-- Metric 2: Endurance -->
          <div class="relative bg-gray-100 dark:bg-gray-700 rounded-full p-1 shadow-md shadow-inset-dark overflow-hidden">
            <div class="absolute inset-0 bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-600 dark:to-gray-700 rounded-full transform -skew-y-3 blur-sm"></div>
            <div class="relative z-10 w-full bg-white dark:bg-gray-800 rounded-full h-10 shadow-inner overflow-hidden">
              <div class="absolute inset-0 bg-gradient-to-r from-gray-400 to-gray-500 dark:from-gray-500 dark:to-gray-600 rounded-full h-full transform transition-transform duration-1000 ease-out" style="width: 85%;">
                <div class="absolute inset-0 bg-white opacity-20 dark:bg-gray-900 dark:opacity-20 blend-overlay"></div>
              </div>
              <div class="absolute inset-0 flex items-center justify-between px-4 text-sm font-semibold text-gray-900 dark:text-white mix-blend-difference">
                <span>Endurance</span>
                <span>85%</span>
              </div>
            </div>
          </div>

          <!-- Metric 3: Flexibility -->
          <div class="relative bg-gray-100 dark:bg-gray-700 rounded-full p-1 shadow-md shadow-inset-dark overflow-hidden">
            <div class="absolute inset-0 bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-600 dark:to-gray-700 rounded-full transform -skew-y-3 blur-sm"></div>
            <div class="relative z-10 w-full bg-white dark:bg-gray-800 rounded-full h-10 shadow-inner overflow-hidden">
              <div class="absolute inset-0 bg-gradient-to-r from-gray-400 to-gray-500 dark:from-gray-500 dark:to-gray-600 rounded-full h-full transform transition-transform duration-1000 ease-out" style="width: 60%;">
                <div class="absolute inset-0 bg-white opacity-20 dark:bg-gray-900 dark:opacity-20 blend-overlay"></div>
              </div>
              <div class="absolute inset-0 flex items-center justify-between px-4 text-sm font-semibold text-gray-900 dark:text-white mix-blend-difference">
                <span>Flexibility</span>
                <span>60%</span>
              </div>
            </div>
          </div>

        </div>
      </div>

      <!-- Call to Action / Next Steps -->
      <div class="text-center bg-gray-100 dark:bg-gray-700 p-6 rounded-lg shadow-lg relative overflow-hidden group">
        <div class="absolute -inset-1 bg-gradient-to-br from-gray-200 via-gray-300 to-gray-400 dark:from-gray-600 dark:via-gray-700 dark:to-gray-800 rounded-lg blur opacity-0 group-hover:opacity-100 transition duration-300 pointer-events-none"></div>
        <div class="relative z-10">
          <p class="text-gray-700 dark:text-gray-200 mb-4 text-lg">Ready for your next challenge?</p>
          <button class="bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 font-bold py-3 px-8 rounded-full text-lg shadow-xl uppercase tracking-wider transform transition duration-300 hover:scale-105 hover:bg-gray-700 dark:hover:bg-white focus:outline-none focus:ring-4 focus:ring-offset-2 focus:ring-gray-500 dark:focus:ring-gray-400">
            Plan Next Workout
          </button>
        </div>
      </div>

    </div>
  </div>
</div>

<style>
  /* Custom utility for inner shadow, simulating 3D depth */
  .shadow-inset-dark {
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6), inset 0 -2px 4px rgba(255, 255, 255, 0.1);
  }

  .dark .shadow-inset-dark {
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.8), inset 0 -2px 4px rgba(255, 255, 255, 0.05);
  }

  @keyframes fade-in-up {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .animate-fade-in-up {
    animation: fade-in-up 0.8s ease-out forwards;
  }

  .blend-overlay {
    mix-blend-mode: overlay;
  }
</style>

Composant de la barre de progression

Un composant de barre de progression simple et réactif avec l’influence du Material Design, utilisant des tons chauds de coucher de soleil. Idéal pour les applications technologiques/SaaS, avec prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="p-4 sm:p-6 md: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-md bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden">
    <div class="p-6 sm:p-8">
      <h2 class="text-xl sm:text-2xl font-bold text-gray-800 dark:text-gray-100 mb-4">Upload Progress</h2>
      <p class="text-sm text-gray-600 dark:text-gray-400 mb-6">Uploading your files. Please wait...</p>

      <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5 sm:h-3.5 mb-2 relative overflow-hidden shadow-inner">
        <div class="bg-gradient-to-r from-red-500 to-orange-400 h-full rounded-full dark:from-red-600 dark:to-orange-500 transition-all duration-500 ease-out" style="width: 75%;"></div>
        <div class="absolute top-0 right-0 h-full w-4 bg-white dark:bg-gray-800 opacity-20 transform -skew-x-12" style="margin-left: -2px;"></div>
      </div>

      <div class="flex justify-between items-center text-sm font-medium text-gray-700 dark:text-gray-300">
        <span>75% Complete</span>
        <span>3 of 4 files</span>
      </div>

      <div class="mt-6 flex justify-end">
        <button class="px-4 py-2 sm:px-5 sm:py-2.5 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-md font-semibold text-sm hover:bg-gray-300 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-opacity-75 transition duration-150 ease-in-out">
          Cancel
        </button>
      </div>
    </div>
  </div>
</div>

Composant de la barre de progression

Un composant de barre de progression complexe et réactif pour les services gouvernementaux/publics, avec un design épuré et minimaliste avec une palette monochrome et des accents lumineux, la prise en charge du mode sombre et des informations détaillées sur la progression.

Ouvrir Aperçu

                <div class="p-4 sm:p-6 lg:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen font-sans text-gray-900 dark:text-gray-100">

  <div class="max-w-4xl mx-auto bg-white dark:bg-gray-800 shadow-xl rounded-lg overflow-hidden border border-gray-200 dark:border-gray-700">
    <div class="p-6 sm:p-8 lg:p-10">
      <h2 class="text-2xl sm:text-3xl font-bold mb-4 text-gray-900 dark:text-gray-100 leading-tight">Application Progress Overview</h2>
      <p class="text-gray-600 dark:text-gray-400 mb-8 max-w-2xl text-base sm:text-lg">Track the current status of your public service application. Each step indicates a critical milestone in processing.</p>

      <!-- Global Progress Bar -->
      <div class="mb-8">
        <div class="flex justify-between items-center mb-2">
          <span class="text-lg sm:text-xl font-semibold text-gray-800 dark:text-gray-200">Overall Completion</span>
          <span class="text-xl sm:text-2xl font-bold text-teal-600 dark:text-teal-500">75%</span>
        </div>
        <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-3 sm:h-4 overflow-hidden">
          <div class="bg-teal-600 dark:bg-teal-500 h-full rounded-full transition-all duration-500 ease-out" style="width: 75%;"></div>
        </div>
      </div>

      <!-- Step-by-step Progress -->
      <div class="space-y-6 sm:space-y-8">

        <!-- Step 1: Completed -->
        <div class="flex items-start gap-4">
          <div class="flex-shrink-0 relative">
            <div class="w-10 h-10 sm:w-12 sm:h-12 bg-teal-600 dark:bg-teal-500 rounded-full flex items-center justify-center text-white text-xl sm:text-2xl font-bold">
              <svg class="w-6 h-6 sm:w-7 sm:h-7" 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="M5 13l4 4L19 7"></path></svg>
            </div>
            <div class="absolute left-1/2 top-full mt-2 transform -translate-x-1/2 w-0.5 h-16 sm:h-20 bg-gray-300 dark:bg-gray-600"></div>
          </div>
          <div class="flex-grow pt-1">
            <h3 class="text-lg sm:text-xl font-semibold text-gray-900 dark:text-gray-100">1. Application Submission</h3>
            <p class="text-gray-600 dark:text-gray-400 text-sm sm:text-base">Your application was successfully submitted on 2023-10-26.</p>
            <div class="flex items-center text-teal-600 dark:text-teal-500 mt-2 text-sm sm:text-base">
              <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
              Completed
            </div>
          </div>
        </div>

        <!-- Step 2: Completed -->
        <div class="flex items-start gap-4">
          <div class="flex-shrink-0 relative">
            <div class="w-10 h-10 sm:w-12 sm:h-12 bg-teal-600 dark:bg-teal-500 rounded-full flex items-center justify-center text-white text-xl sm:text-2xl font-bold">
              <svg class="w-6 h-6 sm:w-7 sm:h-7" 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="M5 13l4 4L19 7"></path></svg>
            </div>
            <div class="absolute left-1/2 top-full mt-2 transform -translate-x-1/2 w-0.5 h-16 sm:h-20 bg-gray-300 dark:bg-gray-600"></div>
          </div>
          <div class="flex-grow pt-1">
            <h3 class="text-lg sm:text-xl font-semibold text-gray-900 dark:text-gray-100">2. Document Verification</h3>
            <p class="text-gray-600 dark:text-gray-400 text-sm sm:text-base">All submitted documents have been verified and confirmed.</p>
            <div class="flex items-center text-teal-600 dark:text-teal-500 mt-2 text-sm sm:text-base">
              <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
              Completed
            </div>
          </div>
        </div>

        <!-- Step 3: In Progress -->
        <div class="flex items-start gap-4">
          <div class="flex-shrink-0 relative">
            <div class="w-10 h-10 sm:w-12 sm:h-12 bg-teal-600 dark:bg-teal-500 rounded-full flex items-center justify-center text-white text-xl sm:text-2xl font-bold">3</div>
            <div class="absolute left-1/2 top-full mt-2 transform -translate-x-1/2 w-0.5 h-16 sm:h-20 bg-gray-300 dark:bg-gray-600"></div>
          </div>
          <div class="flex-grow pt-1">
            <h3 class="text-lg sm:text-xl font-semibold text-gray-900 dark:text-gray-100">3. Review by Case Officer</h3>
            <p class="text-gray-600 dark:text-gray-400 text-sm sm:text-base">Your application is currently under review by a dedicated case officer. This may take up to 3-5 business days.</p>
            <div class="flex items-center text-blue-600 dark:text-blue-400 mt-2 text-sm sm:text-base leading-none">
              <div class="w-3 h-3 bg-blue-600 dark:bg-blue-400 rounded-full animate-pulse mr-2"></div>
              In Progress
            </div>
          </div>
        </div>

        <!-- Step 4: Pending -->
        <div class="flex items-start gap-4">
          <div class="flex-shrink-0">
            <div class="w-10 h-10 sm:w-12 sm:h-12 bg-gray-300 dark:bg-gray-600 rounded-full flex items-center justify-center text-gray-500 dark:text-gray-400 text-xl sm:text-2xl font-bold">4</div>
          </div>
          <div class="flex-grow pt-1">
            <h3 class="text-lg sm:text-xl font-semibold text-gray-900 dark:text-gray-100">4. Final Approval</h3>
            <p class="text-gray-600 dark:text-gray-400 text-sm sm:text-base">Awaiting final approval once the review process is complete.</p>
            <div class="flex items-center text-gray-500 dark:text-gray-400 mt-2 text-sm sm:text-base">
              <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M8.257 3.099c.765-1.3 2.147-1.3 2.912 0l5.572 9.573A1.5 1.5 0 0116 14.5H4c-.848 0-1.395-.837-.943-1.628l5.572-9.573zM10 15a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path></svg>
              Pending
            </div>
          </div>
        </div>

      </div>

      <div class="mt-10 pt-6 border-t border-gray-200 dark:border-gray-700 text-center">
        <p class="text-gray-700 dark:text-gray-300 text-sm sm:text-base">Last updated: <span class="font-medium">2023-11-01, 10:30 AM (GMT+1)</span></p>
        <p class="text-gray-600 dark:text-gray-400 text-xs sm:text-sm mt-2">For inquiries, please contact our support team at <a href="mailto:[email protected]" class="text-teal-600 dark:text-teal-500 hover:underline">[email protected]</a>.</p>
      </div>
    </div>
  </div>

</div>

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.

Ouvrir Aperçu

                <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">&#10003;</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">&#10003;</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>

Skeuomorphic_Monochromatic_Progress_Bar

Composant de barre de progression sceupmorphique de complexité modérée pour le commerce électronique, doté d’une palette de couleurs monochromatiques, d’une réactivité totale et d’une prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="p-4 sm:p-6 md: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-sm md:max-w-md lg:max-w-lg bg-gray-200 dark:bg-gray-800 rounded-xl p-6 shadow-2xl transition-colors duration-300 transform
              relative
              before:content-[''] before:absolute before:inset-0 before:rounded-xl before:bg-gradient-to-br before:from-gray-300 before:via-gray-200 before:to-gray-100 dark:before:from-gray-900 dark:before:via-gray-800 dark:before:to-gray-700 before:opacity-0 before:transition-opacity before:duration-300
              hover:before:opacity-100">

    <div class="relative z-10">
      <h2 class="text-xl sm:text-2xl font-bold text-gray-800 dark:text-gray-100 mb-4 text-center tracking-tight">
        Order Processing
      </h2>

      <div class="mb-8">
        <p class="text-sm text-gray-600 dark:text-gray-400 text-center mb-2">
          50% Completed - Your order is being prepared.
        </p>

        <div class="relative h-6 sm:h-8 rounded-full bg-gray-300 dark:bg-gray-700 shadow-inner overflow-hidden border border-gray-400 dark:border-gray-600
                    before:content-[''] before:absolute before:inset-0 before:rounded-full before:bg-gradient-to-br before:from-gray-400 before:to-gray-500 dark:before:from-gray-800 dark:before:to-gray-900 before:opacity-50">

          <div class="absolute top-0 left-0 h-full w-1/2 rounded-full bg-blue-600 transition-all duration-700 ease-out
                      shadow-lg
                      before:content-[''] before:absolute before:inset-0 before:rounded-full before:bg-gradient-to-t before:from-blue-700 before:to-blue-500 before:opacity-80
                      after:content-[''] after:absolute after:inset-y-0 after:right-0 after:w-1/4 after:bg-white after:opacity-20 after:blur-sm after:rounded-r-full">
            <div class="h-full flex items-center justify-end pr-2 text-xs sm:text-sm font-semibold text-white tracking-wider animate-pulse-text">
              50%
            </div>
          </div>
        </div>
      </div>

      <div class="grid grid-cols-3 gap-4">
        <!-- Step 1 -->
        <div class="flex flex-col items-center">
          <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-full bg-blue-600 dark:bg-blue-700 flex items-center justify-center text-white text-lg sm:text-xl font-bold mb-2 shadow-md transition-all duration-300
                      relative
                      before:content-[''] before:absolute before:inset-0 before:rounded-full before:bg-gradient-to-br before:from-blue-700 before:to-blue-500 before:opacity-70
                      after:content-[''] after:absolute after:inset-0 after:rounded-full after:bg-white after:opacity-10 after:scale-90">
            ✓
          </div>
          <p class="text-xs sm:text-sm text-gray-700 dark:text-gray-300 text-center font-medium">Confirmed</p>
        </div>

        <!-- Step 2 -->
        <div class="flex flex-col items-center">
          <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-full bg-blue-500 dark:bg-blue-600 flex items-center justify-center text-white text-lg sm:text-xl font-bold mb-2 shadow-inner transition-all duration-300
                      relative
                      before:content-[''] before:absolute before:inset-0 before:rounded-full before:bg-gradient-to-br before:from-blue-600 before:to-blue-400 before:opacity-70
                      after:content-[''] after:absolute after:inset-0 after:rounded-full after:bg-white after:opacity-10 after:scale-90">
            2
          </div>
          <p class="text-xs sm:text-sm text-gray-700 dark:text-gray-300 text-center font-medium">Processing</p>
        </div>

        <!-- Step 3 -->
        <div class="flex flex-col items-center">
          <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-full bg-gray-400 dark:bg-gray-600 flex items-center justify-center
                      text-gray-600 dark:text-gray-400 text-lg sm:text-xl font-bold mb-2 shadow-inner transition-all duration-300
                      relative
                      before:content-[''] before:absolute before:inset-0 before:rounded-full before:bg-gradient-to-br before:from-gray-500 before:to-gray-300 dark:before:from-gray-700 dark:before:to-gray-500 before:opacity-70
                      after:content-[''] after:absolute after:inset-0 after:rounded-full after:bg-gray-200 dark:after:bg-gray-800 after:opacity-20 after:scale-90">
            3
          </div>
          <p class="text-xs sm:text-sm text-gray-500 dark:text-gray-400 text-center">Shipped</p>
        </div>
      </div>
    </div>

  </div>
</div>

<style>
  /* This is just for demonstration if you want a subtle animation effect. */
  /* Tailwind does not have built-in keyframe animation utilities for complex animations without custom config. */
  /* For a pure Tailwind solution, you'd define these in tailwind.config.js */
  @keyframes pulseText {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
  }
  .animate-pulse-text {
    animation: pulseText 2s ease-in-out infinite;
  }
</style>

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.

Ouvrir Aperçu

                <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>

Organic_Nature_ProgressBar

Un composant de barre de progression à thème rétro inspiré de la nature pour les applications industrielles et manufacturières, avec des lignes fluides, des couleurs sourdes et la prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="p-4 sm:p-6 md:p-8 bg-gradient-to-br from-stone-100 to-amber-100 dark:from-stone-800 dark:to-stone-900 min-h-screen flex items-center justify-center font-sans">
  <div class="w-full max-w-4xl bg-white dark:bg-stone-700 rounded-3xl shadow-xl overflow-hidden transform transition-all duration-300 ease-in-out hover:scale-[1.02] border-t-4 border-l-4 border-stone-200 dark:border-stone-600">
    <div class="p-6 sm:p-8 flex items-center justify-between border-b border-stone-200 dark:border-stone-600">
      <h2 class="text-2xl sm:text-3xl font-bold text-gray-800 dark:text-gray-100 font-serif tracking-wide">Production Progress</h2>
      <span class="px-4 py-2 bg-gradient-to-tr from-orange-400 to-amber-500 text-white text-sm sm:text-base font-semibold rounded-full shadow-md transform hover:scale-105 transition-transform duration-200 ease-out">Batch #235</span>
    </div>
    <div class="p-6 sm:p-8 md:p-10">
      <div class="mb-6">
        <h3 class="text-lg sm:text-xl font-semibold text-gray-700 dark:text-gray-200 mb-2">Component Assembly</h3>
        <div class="w-full bg-gradient-to-r from-stone-300 to-stone-400 dark:from-stone-600 dark:to-stone-700 rounded-full h-8 sm:h-10 relative overflow-hidden shadow-inner">
          <div class="h-full bg-gradient-to-r from-teal-500 to-emerald-600 dark:from-teal-600 dark:to-emerald-700 rounded-full transition-all duration-500 ease-out" style="width: 75%;">
            <div class="absolute inset-0 flex items-center px-4 md:px-6 text-sm sm:text-base font-semibold text-white justify-between">
                <span>75% Complete</span>
                <span class="text-xs sm:text-sm">Stage 3 of 4</span>
            </div>
          </div>
          <div class="absolute inset-0 border-2 border-transparent rounded-full pointer-events-none" style="box-shadow: inset 0 0 10px rgba(0,0,0,0.1), inset 0 0 5px rgba(255,255,255,0.3);"></div>
          <svg class="absolute inset-0 w-full h-full" preserveAspectRatio="none" viewBox="0 0 100 100">
            <defs>
              <filter id="wavy-fill-1">
                <feTurbulence baseFrequency="0.05 0.1" numOctaves="2" result="turbulence" seed="10"/>
                <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="5" xChannelSelector="A" yChannelSelector="R"/>
              </filter>
            </defs>
            <rect class="fill-teal-500 dark:fill-teal-600" width="75%" height="100%" filter="url(#wavy-fill-1)" x="0" y="0"/>
          </svg>
        </div>
      </div>

      <div class="mb-6">
        <h3 class="text-lg sm:text-xl font-semibold text-gray-700 dark:text-gray-200 mb-2">Quality Assurance</h3>
        <div class="w-full bg-gradient-to-r from-stone-300 to-stone-400 dark:from-stone-600 dark:to-stone-700 rounded-full h-8 sm:h-10 relative overflow-hidden shadow-inner">
          <div class="h-full bg-gradient-to-r from-yellow-500 to-orange-500 dark:from-yellow-600 dark:to-orange-600 rounded-full transition-all duration-500 ease-out" style="width: 40%;">
            <div class="absolute inset-0 flex items-center px-4 md:px-6 text-sm sm:text-base font-semibold text-white justify-between">
                <span>40% Scanned</span>
                <span class="text-xs sm:text-sm">Remaining: 60%</span>
            </div>
          </div>
          <div class="absolute inset-0 border-2 border-transparent rounded-full pointer-events-none" style="box-shadow: inset 0 0 10px rgba(0,0,0,0.1), inset 0 0 5px rgba(255,255,255,0.3);"></div>
           <svg class="absolute inset-0 w-full h-full" preserveAspectRatio="none" viewBox="0 0 100 100">
            <defs>
              <filter id="wavy-fill-2">
                <feTurbulence baseFrequency="0.05 0.1" numOctaves="2" result="turbulence" seed="20"/>
                <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="5" xChannelSelector="A" yChannelSelector="R"/>
              </filter>
            </defs>
            <rect class="fill-yellow-500 dark:fill-yellow-600" width="40%" height="100%" filter="url(#wavy-fill-2)" x="0" y="0"/>
          </svg>
        </div>
      </div>

      <div>
        <h3 class="text-lg sm:text-xl font-semibold text-gray-700 dark:text-gray-200 mb-2">Final Packaging</h3>
        <div class="w-full bg-gradient-to-r from-stone-300 to-stone-400 dark:from-stone-600 dark:to-stone-700 rounded-full h-8 sm:h-10 relative overflow-hidden shadow-inner">
          <div class="h-full bg-gradient-to-r from-violet-500 to-purple-600 dark:from-violet-600 dark:to-purple-700 rounded-full transition-all duration-500 ease-out" style="width: 90%;">
            <div class="absolute inset-0 flex items-center px-4 md:px-6 text-sm sm:text-base font-semibold text-white justify-between">
                <span>90% Packed</span>
                <span class="text-xs sm:text-sm">Next: Shipping</span>
            </div>
          </div>
          <div class="absolute inset-0 border-2 border-transparent rounded-full pointer-events-none" style="box-shadow: inset 0 0 10px rgba(0,0,0,0.1), inset 0 0 5px rgba(255,255,255,0.3);"></div>
          <svg class="absolute inset-0 w-full h-full" preserveAspectRatio="none" viewBox="0 0 100 100">
            <defs>
              <filter id="wavy-fill-3">
                <feTurbulence baseFrequency="0.05 0.1" numOctaves="2" result="turbulence" seed="30"/>
                <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="5" xChannelSelector="A" yChannelSelector="R"/>
              </filter>
            </defs>
            <rect class="fill-violet-500 dark:fill-violet-600" width="90%" height="100%" filter="url(#wavy-fill-3)" x="0" y="0"/>
          </svg>
        </div>
      </div>
    </div>

    <div class="p-6 sm:p-8 text-center border-t border-stone-200 dark:border-stone-600 bg-stone-50 dark:bg-stone-800">
      <p class="text-gray-600 dark:text-gray-300 text-sm sm:text-base">Last updated: <span class="font-medium text-gray-700 dark:text-gray-200">2023-10-27 14:35 PST</span></p>
    </div>
  </div>
</div>