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

Fortschrittsbalken für Neumorphismus

Fortschrittsbalken-Komponente mit Neumorphism-Design, responsiven Effekten und Unterstützung für dunkle Designs mit Tailwind CSS

Vorschau

HTML-Code 

<!-- Light Mode -->
<div class="flex items-center justify-center min-h-screen bg-gray-200 dark:bg-gray-800">
  <div class="w-64 h-4 bg-gray-300 rounded-full shadow-inner dark:bg-gray-700 dark:shadow-inner-dark">
    <div class="w-3/4 h-full text-center text-xs text-white bg-blue-500 rounded-full dark:bg-blue-600" style="width: 75%;">
    </div>
  </div>
</div>

<!-- Dark Mode (example - activate dark mode in your Tailwind config) -->
<div class="flex items-center justifies-center min-h-screen bg-gray-800">
  <div class="w-64 h-4 bg-gray-700 rounded-full shadow-inner-dark">
    <div class="w-3/4 h-full text-center text-xs text-white bg-blue-600 rounded-full" style="width: 75%;">
    </div>
  </div>
</div>

Verwandte Komponenten

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

Offen

Komponente der Fortschrittsleiste

Eine einfache Fortschrittsbalkenkomponente im Stil eines brutalistischen Designs mit einem Graustufen-Farbschema für E-Commerce-Anwendungen. Es ist reaktionsschnell und unterstützt den Dunkelmodus.

Offen

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.

Offen