CCHub Logo CCHub Tailwind Collection
Komponenten Fortschrittsbalken Fortschrittsbalken für Neumorphismus

Fortschrittsbalken für Neumorphismus

Eine reaktionsschnelle Fortschrittsbalkenkomponente im Neumorphismus-Stil, die für Dashboards entwickelt wurde, eine interaktive Funktion enthält und den Dunkelmodus unterstützt.

Vorschau

HTML-Code 

<div class="max-w-md mx-auto mt-10 p-5 bg-gray-100 dark:bg-gray-800 rounded-xl shadow-md">
    <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-3">Progress Bar</h2>
    <div class="relative pt-1">
        <div class="flex justify-between mb-1">
            <span class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-teal-600 bg-teal-200 dark:bg-teal-600 dark:text-teal-200">Task 1</span>
            <span class="text-xs font-semibold text-gray-600 dark:text-gray-400">70%</span>
        </div>
        <div class="flex items-center h-2 bg-gray-300 dark:bg-gray-600 rounded-full">
            <div class="h-full bg-teal-400 rounded-full transition-all duration-300 w-7/12"></div>
        </div>
    </div>
    <div class="relative pt-1">
        <div class="flex justify-between mb-1">
            <span class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-purple-600 bg-purple-200 dark:bg-purple-600 dark:text-purple-200">Task 2</span>
            <span class="text-xs font-semibold text-gray-600 dark:text-gray-400">40%</span>
        </div>
        <div class="flex items-center h-2 bg-gray-300 dark:bg-gray-600 rounded-full">
            <div class="h-full bg-purple-400 rounded-full transition-all duration-300 w-5/12"></div>
        </div>
    </div>
    <div class="relative pt-1">
        <div class="flex justify-between mb-1">
            <span class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-blue-600 bg-blue-200 dark:bg-blue-600 dark:text-blue-200">Task 3</span>
            <span class="text-xs font-semibold text-gray-600 dark:text-gray-400">90%</span>
        </div>
        <div class="flex items-center h-2 bg-gray-300 dark:bg-gray-600 rounded-full">
            <div class="h-full bg-blue-400 rounded-full transition-all duration-300 w-11/12"></div>
        </div>
    </div>
</div>

Verwandte Komponenten

Komponente der Fortschrittsleiste

Eine komplexe, reaktionsschnelle Fortschrittsleistenkomponente für Behörden/öffentliche Dienste mit einem klaren, minimalistischen Design mit monochromer Farbpalette und hellem Akzent, Unterstützung für den Dunkelmodus und detaillierten Fortschrittsinformationen.

Offen

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.

Offen

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