CCHub Logo CCHub Tailwind Collection
Komponenten Fortschrittsbalken Fortschrittsbalken für E-Commerce-Bestellungen

Fortschrittsbalken für E-Commerce-Bestellungen

Eine reaktionsschnelle Fortschrittsbalkenkomponente für den E-Commerce mit Unterstützung des Dunkelmodus und einem monochromen Design. Kein JavaScript, nur HTML und Tailwind CSS.

Vorschau

HTML-Code 

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

Verwandte Komponenten

Komponente der Fortschrittsleiste

Eine einfache Fortschrittsbalkenkomponente im Stil eines brutalistischen Designs mit einem Graustufen-Farbschema für E-Commerce-Anwendungen. Es ist reaktionsschnell und unterstützt den Dunkelmodus.

Offen

Gradient Rainbow Fortschrittsbalken für die Fotografie

Eine komplexe, reaktionsschnelle Fortschrittsleistenkomponente für Fotoportfolios mit einem mehrfarbigen Regenbogendesign mit Farbverlauf und Unterstützung für den Dunkelmodus. Ideal für die Präsentation des Ladens von Fotos oder des Fortschritts von Galerien.

Offen

Komponente der Fortschrittsleiste

Eine einfache, reaktionsschnelle Komponente des Fortschrittsbalkens mit Material Design-Einflüssen und warmen Sonnenuntergangstönen. Ideal für Technologie-/SaaS-Anwendungen, mit Unterstützung für den Dunkelmodus.

Offen