CCHub Logo CCHub Tailwind Collection
Komponenten Fortschrittsbalken Komponente der Fortschrittsleiste

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.

Vorschau

HTML-Code 

<div class="flex flex-col items-center justify-center h-screen bg-gray-900 dark:bg-gray-800">
    <div class="bg-white dark:bg-gray-700 bg-opacity-30 backdrop-blur-md border border-gray-500 rounded-lg p-6 shadow-lg w-1/2">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Progress</h2>
        <div class="relative w-full h-4 rounded-full bg-gray-300 dark:bg-gray-600">
            <div class="absolute top-0 left-0 h-4 rounded-full bg-blue-500" style="width: 70%;"></div>
        </div>
        <span class="text-base text-gray-800 dark:text-gray-200 mt-2">70%</span>
    </div>
</div>

Verwandte Komponenten

Fortschrittsbalken für den Dunkelmodus

Eine reaktionsschnelle Fortschrittsleisten-Komponente, die für den Dunkelmodus mit Tailwind CSS entwickelt wurde, mit einem schlanken Design und Unterstützung für dunkle Themen.

Offen

3D-Graustufen-Sport-Fitness-Fortschrittsbalken

Eine komplexe 3D-Graustufen-Fortschrittsbalken-Komponente, die für Sport- und Fitnessanwendungen entwickelt wurde und den Trainingsfortschritt mit Tiefe und visueller Interaktion anzeigt. Es unterstützt den Dunkelmodus und ist vollständig reaktionsschnell.

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