Componentes Barra de progreso Barra de progreso de pedidos de comercio electrónico

Barra de progreso de pedidos de comercio electrónico

Un componente de barra de progreso receptivo para comercio electrónico con soporte para modo oscuro, con un diseño monocromático. Sin JavaScript, solo HTML y Tailwind CSS.

Vista previa

Código HTML

<div class="dark:bg-gray-900 min-h-screen p-4 flex items-center justify-center">
  <div class="w-full max-w-2xl bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-6">Order Progress</h2>

    <div class="mb-8">
      <div class="flex justify-between mb-1">
        <span class="text-base font-medium text-gray-700 dark:text-gray-300">Order Placed</span>
        <span class="text-sm font-medium text-gray-700 dark:text-gray-300">100%</span>
      </div>
      <div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
        <div class="bg-indigo-600 h-2.5 rounded-full" style="width: 100%;"></div>
      </div>
    </div>

    <div class="mb-8">
      <div class="flex justify-between mb-1">
        <span class="text-base font-medium text-gray-700 dark:text-gray-300">Processing</span>
        <span class="text-sm font-medium text-gray-700 dark:text-gray-300">75%</span>
      </div>
      <div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
        <div class="bg-indigo-600 h-2.5 rounded-full" style="width: 75%;"></div>
      </div>
    </div>

    <div class="mb-8">
      <div class="flex justify-between mb-1">
        <span class="text-base font-medium text-gray-700 dark:text-gray-300">Shipped</span>
        <span class="text-sm font-medium text-gray-700 dark:text-gray-300">50%</span>
      </div>
      <div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
        <div class="bg-indigo-600 h-2.5 rounded-full" style="width: 50%;"></div>
      </div>
    </div>

    <div class="mb-8">
      <div class="flex justify-between mb-1">
        <span class="text-base font-medium text-gray-700 dark:text-gray-300">Out for Delivery</span>
        <span class="text-sm font-medium text-gray-700 dark:text-gray-300">25%</span>
      </div>
      <div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
        <div class="bg-indigo-600 h-2.5 rounded-full" style="width: 25%;"></div>
      </div>
    </div>

    <div>
      <div class="flex justify-between mb-1">
        <span class="text-base font-medium text-gray-700 dark:text-gray-300">Delivered</span>
        <span class="text-sm font-medium text-gray-700 dark:text-gray-300">0%</span>
      </div>
      <div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
        <div class="bg-indigo-600 h-2.5 rounded-full" style="width: 0%;"></div>
      </div>
    </div>
  </div>
</div>

Componentes relacionados

ProgressBarComponent

Un componente de barra de progreso simple, limpio y receptivo con colores neón/eléctricos para sitios web de comida/restaurantes, con soporte para modo oscuro y diseño de tipografía suiza/internacional.

Abrir

Luxury_Grayscale_Social_Media_Progress_Bar

Un componente de barra de progreso complejo, elegante y receptivo para interfaces de redes sociales, con un diseño de lujo en escala de grises con tipografía sofisticada y soporte para modo oscuro.

Abrir

Barra de progreso triádica minimalista

Una barra de progreso minimalista y receptiva con esquema de color triádico y soporte para temas oscuros, adecuada para aplicaciones de redes sociales.

Abrir