Komponente der Fortschrittsleiste
Eine reaktionsschnelle Fortschrittsbalken-Komponente, die im Material Design-Stil gestaltet wurde und pastellfarbene Farbschemata für Portfolio-Vitrinen enthält. Es unterstützt den Dunkelmodus.
HTML-Code
<div class="flex flex-col items-center justify-center p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md">
<h2 class="text-xl font-semibold mb-2 text-gray-700 dark:text-gray-200">Project Progress</h2>
<div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full">
<div class="bg-gradient-to-r from-pink-300 via-purple-300 to-indigo-400 h-4 rounded-full" style="width: 70%;"></div>
</div>
<div class="flex justify-between w-full mt-2 text-xs text-gray-600 dark:text-gray-400">
<span>0%</span>
<span>70%</span>
<span>100%</span>
</div>
<div class="mt-4">
<img src="https://picsum.photos/100/100" alt="Project Screenshot" class="rounded-lg shadow-md">
</div>
<div class="mt-2 flex items-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full shadow-md mr-2">
<span class="text-gray-700 dark:text-gray-200">Reviewed by John Doe</span>
</div>
</div>Verwandte Komponenten
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.
Komponente des Fortschrittsbalkens im Dunkelmodus
Eine reaktionsschnelle Fortschrittsbalkenkomponente im Dunkelmodus für Geschäfts-/Unternehmenswebsites mit leuchtenden Farben und interaktiven Elementen.
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