CCHub Logo CCHub Tailwind Collection
Komponenten Fortschrittsindikatoren Komponente "Fortschrittsindikatoren"

Komponente "Fortschrittsindikatoren"

Hierbei handelt es sich um eine Fortschrittsanzeigekomponente im Stil von Material Design, die Tailwind CSS verwendet, mit responsiven Effekten und Unterstützung für dunkle Themen.

Vorschau

HTML-Code 

<div class="flex flex-col items-center justify-center min-h-screen bg-white dark:bg-gray-800 p-4">

  <!-- Linear Progress Bar -->
  <div class="w-64 h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden shadow-md">
    <div class="h-full bg-blue-500 dark:bg-blue-400 w-3/4 rounded-full animate-pulse"></div>
  </div>

  <!-- Spacer -->
  <div class="my-8"></div>

  <!-- Circular Progress Indicator -->
  <div class="relative">
    <div class="w-16 h-16 border-4 border-blue-500 dark:border-blue-400 border-t-transparent border-solid rounded-full animate-spin shadow-md"></div>
    <div class="absolute top-0 left-0 w-16 h-16 flex items-center justify-center text-blue-700 dark:text-blue-300 font-bold">
      75%
    </div>
  </div>

  <!-- Spacer -->
  <div class="my-8"></div>

  <!-- Linear Progress Bar with Label -->
  <div class="w-64">
    <div class="flex justify-between mb-1 text-gray-700 dark:text-gray-300">
      <span class="text-base font-medium">Progress</span>
      <span class="text-sm font-medium">45%</span>
    </div>
    <div class="w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden shadow-md">
      <div class="h-full bg-green-500 dark:bg-green-400 w-[45%] rounded-full" style="width: 45%;"></div>
    </div>
  </div>

</div>

Verwandte Komponenten

Komponente "Fortschrittsindikatoren"

Eine reaktionsschnelle Komponente für Fortschrittsindikatoren, die für ein UI-Dashboard im Dunkelmodus mit einem analogen Farbschema entwickelt wurde. Es enthält verschiedene Fortschrittsindikatoren wie Balken, Kreise und einen Aktivitäts-Feed, die alle mit Tailwind CSS für die Unterstützung des Dunkelmodus gestaltet sind. Es wird kein JavaScript verwendet.

Offen

Komponente "Fortschrittsindikatoren"

Eine Komponente für Fortschrittsindikatoren im 3D-Designstil mit Graustufen-Farbschema für den Konsum von Blog-Inhalten, mit responsivem Design und Unterstützung für den Dunkelmodus.

Offen

Komponente "Fortschrittsindikatoren"

Eine einfache Komponente der Fortschrittsindikatoren, die von der Retro-/Vintage-Ästhetik der 80er und 90er Jahre inspiriert ist und ein komplementäres Farbschema verwendet. Entwickelt für Social-Media-Schnittstellen und reaktionsschnell mit Unterstützung für dunkle Themen.

Offen