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 Komponente für Fortschrittsindikatoren im Retro-/Vintage-Stil, die Tailwind CSS mit responsiven Effekten und Unterstützung für dunkle Themen verwendet.

Offen

BrutalistGraustufenFortschrittsleiste

Ein Graustufen-Fortschrittsbalken im brutalistischen Stil für Blog-Inhalte mit einfachem Design, Unterstützung für den Dunkelmodus und Reaktionsfähigkeit.

Offen

Komponente "Fortschrittsindikatoren"

Eine von Material Design inspirierte Komponente für Fortschrittsindikatoren mit responsiven Effekten und Unterstützung für dunkle Themen, die mit Tailwind CSS erstellt wurde.

Offen