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

Material Design Erdiger Fortschrittsbalken

Ein vom Material Design inspirierter Fortschrittsbalken mit Erdtönen, der sich für Social-Media-Schnittstellen eignet. Es ist reaktionsschnell und bietet Unterstützung für den Dunkelmodus mit Tailwind CSS.

Offen

Komponente der 3D-Fortschrittsleiste

Eine reaktionsschnelle Fortschrittsleisten-Komponente, die für Social-Networking-Schnittstellen entwickelt wurde, mit 3D-Effekt, monochromatischem Farbschema und Unterstützung für den Dunkelmodus, die mit Tailwind CSS erstellt wurde.

Offen

Minimalistischer Fortschrittsbalken

Eine minimalistische und flache Design-Fortschrittsbalkenkomponente mit Pastellfarben, die für professionelle Geschäfts- oder Unternehmenswebsites geeignet ist. Es hat ein responsives Design und unterstützt den Dunkelmodus mit Tailwind CSS.

Offen