Componentes de búsqueda

Categorías

Componentes Barra de progreso

Barra de progreso

Indicador que muestra el progreso de finalización

Barra de progreso profesional de comercio electrónico

Un componente de barra de progreso complejo y sensible diseñado para el comercio electrónico, con una combinación de colores otoñales (naranjas, marrones, burdeos intensos) y compatible con el modo oscuro. Proporciona un aspecto limpio y profesional para entornos corporativos.

Abrir Vista previa

                <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 componente simple de barra de progreso de estilo industrial para sitios web de viajes/turismo, con un esquema de color púrpura/violeta y capacidad de respuesta completa con soporte para modo oscuro.

Abrir Vista previa

                <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 componente de barra de progreso de glassmorphism sensible con tonos tierra, adecuado para plataformas de foros o comunidades. Cuenta con elementos translúcidos similares al vidrio esmerilado con efectos de desenfoque y compatibilidad con el modo oscuro.

Abrir Vista previa

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

Barra de progreso de fitness deportivo en escala de grises 3D

Un complejo componente de barra de progreso en escala de grises en 3D diseñado para aplicaciones deportivas y de fitness, que muestra el progreso del entrenamiento con profundidad y compromiso visual. Incluye soporte para el modo oscuro y es totalmente responsivo.

Abrir Vista previa

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

Componente de la barra de progreso

Un componente de barra de progreso simple y sensible con influencia de Material Design, que utiliza tonos cálidos al atardecer. Ideal para aplicaciones de tecnología/SaaS, con soporte para modo oscuro.

Abrir Vista previa

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

Componente de la barra de progreso

Un componente de barra de progreso complejo y receptivo para servicios gubernamentales/públicos, con un diseño limpio y minimalista con una paleta monocromática y acento brillante, compatibilidad con modo oscuro e información de progreso detallada.

Abrir Vista previa

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

Barra de progreso Gradient Rainbow para fotografía

Un componente de barra de progreso complejo y receptivo para portafolios de fotografía, con un diseño de arco iris degradado multicolor y compatibilidad con el modo oscuro. Ideal para mostrar la carga de fotos o la progresión de la galería.

Abrir Vista previa

                <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

Un componente de barra de progreso skeumorphic de complejidad moderada para comercio electrónico, con un esquema de color monocromático, capacidad de respuesta total y compatibilidad con el modo oscuro.

Abrir Vista previa

                <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 componente de barra de progreso de estilo brutalista de alto contraste adecuado para plataformas de mercado, con colores llamativos y diseño simple, con capacidad de respuesta total y compatibilidad con modo oscuro.

Abrir Vista previa

                <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 componente de barra de progreso de temática retro inspirado en la naturaleza para aplicaciones industriales y de fabricación, con líneas fluidas, colores apagados y compatibilidad con el modo oscuro.

Abrir Vista previa

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