CCHub Logo CCHub Tailwind Collection
Komponenten Fortschrittsbalken Komponente der Fortschrittsleiste

Komponente der Fortschrittsleiste

Eine reaktionsschnelle Fortschrittsbalken-Komponente, die mit 3D-Elementen entworfen wurde, unter Verwendung eines analogen Farbschemas, das für den E-Commerce geeignet ist, mit Unterstützung für den Dunkelmodus

Vorschau

HTML-Code 

<div class="max-w-md mx-auto p-4">
    <div class="relative h-8 bg-gray-300 rounded-md overflow-hidden dark:bg-gray-700">
        <div class="absolute inset-0 transition-all duration-300 ease-out bg-gradient-to-r from-green-400 to-blue-400 dark:from-green-600 dark:to-blue-600" style="width: 70%;"></div>
        <div class="absolute inset-0 flex items-center justify-center text-white font-semibold">
            70%
        </div>
    </div>
    <div class="mt-4 text-gray-700 dark:text-gray-300">
        <p class="text-sm">Progress towards your shopping goals.</p>
    </div>
</div>

Verwandte Komponenten

ProgressBarComponent

Eine einfache, saubere und reaktionsschnelle Fortschrittsbalkenkomponente mit Neon/Electric-Farben für Food-/Restaurant-Websites, mit Unterstützung für den Dunkelmodus und schweizerischem/internationalem Typografie-Design.

Offen

Neumorpher Fortschrittsbalken

Eine reaktionsschnelle Fortschrittsleisten-Komponente, die im Neumorphism-Stil entwickelt wurde und sowohl helle als auch dunkle Designs mit Tailwind CSS unterstützt.

Offen

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