CCHub Logo CCHub Tailwind Collection
Komponenten Fortschrittsbalken Komponente der Fortschrittsleiste

Komponente der Fortschrittsleiste

Eine reaktionsschnelle Fortschrittsleisten-Komponente, die für den Dunkelmodus mit einem pastellfarbenen Farbschema entwickelt wurde und für Geschäfts-/Unternehmenswebsites geeignet ist.

Vorschau

HTML-Code 

<div class="bg-gray-800 dark:bg-gray-900 p-6 rounded-lg shadow-md">
    <h2 class="text-white text-lg font-semibold mb-4">Progress Bar</h2>
    <div class="relative pt-1">
        <div class="flex justify-between mb-1 text-sm text-white">
            <span>0%</span>
            <span>100%</span>
        </div>
        <div class="h-2 bg-gray-600 rounded">
            <div class="bg-pastel-green-500 h-full rounded" style="width: 70%;"></div>
        </div>
    </div>
    <div class="flex items-center justify-between mt-4">
        <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2">
            <span class="text-white">John Doe</span>
        </div>
        <span class="text-gray-400 dark:text-gray-500">In Progress</span>
    </div>
</div>

Verwandte Komponenten

Cyberpunk Neo-Retro Fortschrittsbalken

Eine Fortschrittsbalkenkomponente mittlerer Komplexität mit Cyberpunk, Neo-Retro-Ästhetik, dunklem Hintergrund und gedämpften Vintage-Akzentfarben, die für Unterhaltungs-/Medienplattformen entwickelt wurde. Es verfügt über eine segmentierte Fortschrittsanzeige und ist vollständig reaktionsschnell mit Unterstützung des Dunkelmodus.

Offen

Glassmorphism_EarthTones_ProgressBar_ForumComponent

Eine reaktionsschnelle Glassmorphism-Fortschrittsbalkenkomponente mit Erdtönen, die für Foren- oder Community-Plattformen geeignet ist. Verfügt über glasfaserähnliche, durchscheinende Elemente mit Unschärfeeffekten und Unterstützung für den Dunkelmodus.

Offen

Komponente der Fortschrittsleiste

Eine einfache Fortschrittsbalkenkomponente im Stil von Glasmorphismus und monochromen Farben, geeignet für Geschäfts- und Unternehmenswebsites, mit Unterstützung für den Dunkelmodus.

Offen