CCHub Logo CCHub Tailwind Collection
Komponenten Fortschrittsindikatoren Komponente "Fortschrittsindikatoren"

Komponente "Fortschrittsindikatoren"

Eine einfache Komponente der Fortschrittsindikatoren, die von der Retro-/Vintage-Ästhetik der 80er und 90er Jahre inspiriert ist und ein komplementäres Farbschema verwendet. Entwickelt für Social-Media-Schnittstellen und reaktionsschnell mit Unterstützung für dunkle Themen.

Vorschau

HTML-Code 

<div class="flex flex-col items-center justify-center p-6 bg-gray-800 dark:bg-gray-900 rounded-lg shadow-lg max-w-md mx-auto">
    <h2 class="text-2xl font-bold text-white mb-4">Progress Indicators</h2>
    <div class="w-full bg-gray-700 dark:bg-gray-600 rounded-lg">
        <div class="bg-blue-500 dark:bg-blue-400 h-4 rounded-lg" style="width: 70%;"></div>
    </div>
    <div class="flex justify-between w-full text-sm mt-2 text-gray-300 dark:text-gray-200">
        <span>0%</span>
        <span>70%</span>
    </div>
    <div class="flex items-center mt-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-blue-500">
        <div class="ml-3">
            <p class="text-md text-white">User Name</p>
            <p class="text-sm text-gray-400 dark:text-gray-500">Status: Active</p>
        </div>
    </div>
    <p class="text-gray-500 dark:text-gray-400 mt-2 text-center">Loading data...</p>
    <img src="https://picsum.photos/200/100?random=1" alt="Random Image" class="mt-4 rounded-lg shadow-md">
</div>

Verwandte Komponenten

BrutalistGraustufenFortschrittsleiste

Ein Graustufen-Fortschrittsbalken im brutalistischen Stil für Blog-Inhalte mit einfachem Design, Unterstützung für den Dunkelmodus und Reaktionsfähigkeit.

Offen

Komponente "Fortschrittsindikatoren"

Eine einfache, saubere und professionelle Fortschrittsanzeigekomponente mit warmen Sonnenuntergangstönen, die sich für Geschäfts- und Beratungsdienste eignet, mit responsivem Design und Unterstützung für den Dunkelmodus.

Offen

ArtDecoFortschrittIndikator

Eine komplexe, vom Art Deco inspirierte Fortschrittsindikatorkomponente für Job-/Karriereplattformen mit geometrischen Mustern, luxuriösem Styling und Komplementärfarben. Vollständig reaktionsschnell mit Unterstützung des Dunkelmodus.

Offen