CCHub Logo CCHub Tailwind Collection
Komponenten Fortschrittsbalken Fortschrittsbalken

Fortschrittsbalken

Fortschrittsbalkenkomponente mit Mikrointeraktionsdesign. Enthält reaktionsschnelle Effekte und Unterstützung für dunkle Themen, die nur HTML und CSS (Tailwind CSS) verwenden.

Vorschau

HTML-Code 

<div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
  <div class="bg-blue-600 h-2.5 rounded-full" style="width: 45%; animation: progress-animation 2s infinite;"></div>
</div>

<style>
@keyframes progress-animation {
  0% { width: 0%; }
  100% { width: 45%; }
}

.dark .bg-blue-600 {
  background-color: #90cdf4; /* Lighter blue for dark mode */
}

/* Responsive considerations */
@media (max-width: 768px) {
  @keyframes progress-animation {
    0% { width: 0%; }
    100% { width: 60%; } /* Wider progress on smaller screens */
  }
  .bg-blue-600 {
    animation: progress-animation 2s infinite; /* Apply animation again for clarity */
  }
}
</style>

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

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.

Offen

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.

Offen