CCHub Logo CCHub Tailwind Collection
Komponenten Fortschrittsindikatoren Komponente "Fortschrittsindikatoren"

Komponente "Fortschrittsindikatoren"

Ein einfacher Fortschrittsindikator mit einem Glasmorphismus-Effekt, der für E-Commerce-Websites mit Unterstützung des Dunkelmodus und einem monochromatischen Farbschema geeignet ist.

Vorschau

HTML-Code 

<div class="flex flex-col items-center justify-center p-5 bg-white bg-opacity-30 backdrop-blur-sm dark:bg-gray-800 dark:bg-opacity-30 rounded-lg">
    <h1 class="text-xl font-bold text-gray-800 dark:text-white mb-4">Order Progress</h1>
    <div class="w-full mx-auto">
        <!-- Progress Bar -->
        <div class="relative pt-1">
            <div class="flex mb-2 items-center justify-between">
                <div class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-gray-800 dark:text-white bg-blue-200 dark:bg-blue-600">
                    1. Add to Cart
                </div>
                <div class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-gray-800 dark:text-white bg-blue-200 dark:bg-blue-600">
                    2. Checkout
                </div>
                <div class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-gray-800 dark:text-white bg-blue-200 dark:bg-blue-600">
                    3. Payment
                </div>
            </div>
            <div class="flex h-2 mb-4 rounded bg-gray-300 dark:bg-gray-600">
                <div class="w-1/3 h-full bg-blue-600 dark:bg-blue-300"></div>
            </div>
        </div>
    </div>
    <div class="mt-4">
        <img src="https://picsum.photos/40/40" alt="Avatar" class="rounded-full">
    </div>
    <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">Estimated delivery: 3-5 business days</p>
</div>

Verwandte Komponenten

Komponente "Fortschrittsindikatoren"

Eine komplexe Komponente für Fortschrittsindikatoren mit kühlen, neutralen Farbverläufen, sanften Übergängen und mehrstufiger Progression, die für Websites von Behörden und öffentlichen Diensten geeignet ist. Enthält Unterstützung für den Dunkelmodus und reagiert vollständig auf den Modus.

Offen

Komponente "Fortschrittsindikatoren"

Ein neumorph gestalteter Fortschrittsindikator, der für Social-Media-Schnittstellen geeignet ist und sich durch ein einfaches Layout und ein ansprechendes Design mit Unterstützung für den Dunkelmodus auszeichnet.

Offen

Playful_Job_Application_Progress_Indicator

Eine komplexe, spielerische und reaktionsschnelle Fortschrittsindikatorkomponente für Bewerbungsworkflows mit einem Bonbon-/Süßigkeiten-Farbschema und Unterstützung für den Dunkelmodus. Es wurde für Jobbörsen und Karriereentwicklungsplattformen entwickelt und stellt mehrere Bewerbungsphasen visuell mit animierten Übergängen und ermutigenden Botschaften dar.

Offen