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 einfache, reaktionsschnelle Komponente des Fortschrittsbalkens mit Material Design-Einflüssen und warmen Sonnenuntergangstönen. Ideal für Technologie-/SaaS-Anwendungen, mit Unterstützung für den Dunkelmodus.

Offen

Komponente des Fortschrittsbalkens im Dunkelmodus

Eine reaktionsschnelle Fortschrittsbalkenkomponente im Dunkelmodus für Geschäfts-/Unternehmenswebsites mit leuchtenden Farben und interaktiven Elementen.

Offen

Skeuomorpher Fortschrittsbalken

Skeuomorphe Fortschrittsbalkenkomponente für Portfolios mit monochromatischem Farbschema und komplexem, interaktivem Design mit Unterstützung für Responsive- und Dark-Modus unter Verwendung von Tailwind CSS.

Offen