CCHub Logo CCHub Tailwind Collection
Komponenten Fortschrittsindikatoren Komponente "Fortschrittsindikatoren"

Komponente "Fortschrittsindikatoren"

Eine Komponente für Fortschrittsindikatoren im Retro-/Vintage-Stil, die Tailwind CSS mit responsiven Effekten und Unterstützung für dunkle Themen verwendet.

Vorschau

HTML-Code 

<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800">
    <h1 class="text-4xl font-bold text-center text-gray-800 dark:text-gray-200 mb-6">
        Retro Progress Indicators
    </h1>
    <div class="w-full max-w-lg">
        <!-- Progress Bar -->
        <div class="mb-6">
            <div class="relative pt-1">
                <div class="flex mb-2 items-center justify-between">
                    <div class="text-sm font-medium text-gray-600 dark:text-gray-300">Loading...</div>
                    <div class="text-sm font-medium text-gray-600 dark:text-gray-300">80%</div>
                </div>
                <div class="flex h-2 mb-4 bg-gray-200 rounded dark:bg-gray-700">
                    <div class="bg-yellow-500 h-full rounded" style="width: 80%"></div>
                </div>
            </div>
        </div>
        <!-- Circular Progress Indicator -->
        <div class="flex items-center justify-center mb-6">
            <div class="relative w-24 h-24">
                <img src="https://picsum.photos/seed/circularprogress/300/300" class="rounded-full shadow-lg" alt="Circular Progress" /> 
                <div class="absolute inset-0 flex items-center justify-center text-xl font-bold text-yellow-500">
                    80%
                </div>
            </div>
        </div>
        <!-- Step Indicators -->
        <div class="flex justify-between w-full text-center">
            <div>
                <div class="w-4 h-4 bg-yellow-500 rounded-full mx-auto mb-2"></div>
                <div class="text-sm font-medium text-gray-600 dark:text-gray-300">Step 1</div>
            </div>
            <div>
                <div class="w-4 h-4 bg-gray-300 rounded-full mx-auto mb-2 dark:bg-gray-600"></div>
                <div class="text-sm font-medium text-gray-600 dark:text-gray-300">Step 2</div>
            </div>
            <div>
                <div class="w-4 h-4 bg-gray-300 rounded-full mx-auto mb-2 dark:bg-gray-600"></div>
                <div class="text-sm font-medium text-gray-600 dark:text-gray-300">Step 3</div>
            </div>
        </div>
    </div>
    <div class="mt-6">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" class="rounded-full w-16 h-16" alt="User Avatar" />
        <div class="text-center mt-2 text-sm text-gray-600 dark:text-gray-300">John Doe</div>
    </div>
</div>

Verwandte Komponenten

Komponente "Fortschrittsindikatoren"

Eine Komponente mit Fortschrittsindikatoren im brutalistischen Stil mit hohem Kontrast, die Arbeiten oder Produkte in einem Portfolio präsentiert. Es verfügt über eine reichhaltige Benutzeroberfläche mit mehreren interaktiven Elementen, die so konzipiert sind, dass sie mit Unterstützung für dunkle Themen unter Verwendung von Tailwind CSS reaktionsschnell sind.

Offen

Komponente "Fortschrittsindikatoren"

Eine reaktionsschnelle Komponente für Fortschrittsindikatoren im Glasmorphismus-Stil mit mattglasähnlichen durchscheinenden Elementen und Unschärfeeffekten, die dunkle Themen mit Tailwind CSS unterstützen.

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