CCHub Logo CCHub Tailwind Collection
Komponenten Fortschrittsbalken Triadischer Fortschrittsbalken für den Dunkelmodus

Triadischer Fortschrittsbalken für den Dunkelmodus

Eine einfache und dreifarbige Fortschrittsbalkenkomponente für den Dunkelmodus, die für Blogs und den Konsum von Inhalten geeignet ist. Es verfügt über ein responsives Design mit Tailwind CSS, das das Präfix dark: für die Unterstützung dunkler Themen ohne JavaScript verwendet.

Vorschau

HTML-Code 

<div class="dark:bg-gray-900 p-4">
  <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Reading Progress</h2>
  <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5 mb-4">
    <div class="dark:bg-purple-500 h-2.5 rounded-full" style="width: 45%;"></div>
  </div>
  <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5 mb-4">
    <div class="dark:bg-yellow-500 h-2.5 rounded-full" style="width: 60%;"></div>
  </div>
  <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5">
    <div class="dark:bg-emerald-500 h-2.5 rounded-full" style="width: 75%;"></div>
  </div>
</div>

Verwandte Komponenten

Luxury_Grayscale_Social_Media_Progress_Bar

Eine komplexe, elegante und reaktionsschnelle Fortschrittsleistenkomponente für Social-Media-Schnittstellen mit einem luxuriösen Graustufen-Design mit ausgefeilter Typografie und Unterstützung für den Dunkelmodus.

Offen

Professioneller E-Commerce-Fortschrittsbalken

Eine komplexe, reaktionsschnelle Fortschrittsbalken-Komponente, die für den E-Commerce entwickelt wurde, mit einem herbstlichen Farbschema (satte Orange-, Braun- und Burgundertöne) und Unterstützung des Dunkelmodus. Es bietet ein sauberes, professionelles Aussehen für Unternehmensumgebungen.

Offen

Bauhaus-Fortschrittsbalken-Komponente

Eine reaktionsschnelle, vom Bauhaus inspirierte Fortschrittsbalkenkomponente mit moderater Komplexität, die für Unterhaltungs-/Medienplattformen geeignet ist und coole Neutraltöne und Unterstützung für den Dunkelmodus bietet.

Offen