CCHub Logo CCHub Tailwind Collection
Komponenten Fortschrittsbalken Komponente der Fortschrittsleiste

Komponente der Fortschrittsleiste

Eine reaktionsschnelle Fortschrittsleisten-Komponente, die mit Blick auf den Dunkelmodus entwickelt wurde und Tailwind CSS verwendet.

Vorschau

HTML-Code 

<div class="flex items-center justify-center h-screen bg-gray-900">
  <div class="w-full max-w-md">
    <h2 class="text-white text-lg font-semibold mb-4">Progress Bar</h2>
    <div class="relative pt-1">
      <div class="flex items-center justify-between mb-2">
        <span class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-teal-600 bg-teal-200">
          70%
        </span>
        <span class="text-xs font-semibold inline-block text-gray-400">
          7/10
        </span>
      </div>
      <div class="h-2 bg-gray-700 rounded">
        <div class="h-full bg-teal-500 rounded" style="width: 70%;"></div>
      </div>
    </div>
    <p class="text-gray-400 text-sm mt-2">Loading...</p>
  </div>
</div>

Verwandte Komponenten

Komponente der Fortschrittsleiste

Eine einfache Fortschrittsbalkenkomponente im Stil von Glasmorphismus und monochromen Farben, geeignet für Geschäfts- und Unternehmenswebsites, mit Unterstützung für den Dunkelmodus.

Offen

Fortschrittsbalken

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

Offen

Komponente des Fortschrittsbalkens im Dunkelmodus

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

Offen