CCHub Logo CCHub Tailwind Collection
Komponenten Fortschrittsindikatoren Komponente "Fortschrittsindikatoren"

Komponente "Fortschrittsindikatoren"

Eine minimalistische Fortschrittsindikator-Komponente, die entwickelt wurde, um den Fortschritt des Portfolios mit leuchtenden Farben und responsivem Design mit Unterstützung für dunkle Themen zu präsentieren.

Vorschau

HTML-Code 

<div class="max-w-4xl mx-auto p-8">
  <h2 class="text-2xl font-bold text-center mb-6">Portfolio Progress Indicators</h2>
  <div class="space-y-8">
    <div class="bg-gray-200 dark:bg-gray-800 rounded-lg p-5 shadow-lg">
      <div class="flex items-center justify-between mb-2">
        <span class="text-lg font-semibold text-blue-600 dark:text-blue-400">Project 1</span>
        <span class="text-sm font-medium text-gray-600 dark:text-gray-400">70%</span>
      </div>
      <div class="relative w-full h-4 bg-gray-300 dark:bg-gray-700 rounded-full">
        <div class="absolute h-4 bg-blue-600 dark:bg-blue-400 rounded-full" style="width: 70%;"></div>
      </div>
    </div>
    <div class="bg-gray-200 dark:bg-gray-800 rounded-lg p-5 shadow-lg">
      <div class="flex items-center justify-between mb-2">
        <span class="text-lg font-semibold text-red-600 dark:text-red-400">Project 2</span>
        <span class="text-sm font-medium text-gray-600 dark:text-gray-400">45%</span>
      </div>
      <div class="relative w-full h-4 bg-gray-300 dark:bg-gray-700 rounded-full">
        <div class="absolute h-4 bg-red-600 dark:bg-red-400 rounded-full" style="width: 45%;"></div>
      </div>
    </div>
    <div class="bg-gray-200 dark:bg-gray-800 rounded-lg p-5 shadow-lg">
      <div class="flex items-center justify-between mb-2">
        <span class="text-lg font-semibold text-green-600 dark:text-green-400">Project 3</span>
        <span class="text-sm font-medium text-gray-600 dark:text-gray-400">90%</span>
      </div>
      <div class="relative w-full h-4 bg-gray-300 dark:bg-gray-700 rounded-full">
        <div class="absolute h-4 bg-green-600 dark:bg-green-400 rounded-full" style="width: 90%;"></div>
      </div>
    </div>
    <div class="bg-gray-200 dark:bg-gray-800 rounded-lg p-5 shadow-lg">
      <div class="flex items-center justify-between mb-2">
        <span class="text-lg font-semibold text-yellow-600 dark:text-yellow-400">Project 4</span>
        <span class="text-sm font-medium text-gray-600 dark:text-gray-400">60%</span>
      </div>
      <div class="relative w-full h-4 bg-gray-300 dark:bg-gray-700 rounded-full">
        <div class="absolute h-4 bg-yellow-600 dark:bg-yellow-400 rounded-full" style="width: 60%;"></div>
      </div>
    </div>
  </div>
</div>

Verwandte Komponenten

Komponente "Fortschrittsindikatoren"

Eine Komponente zur Fortschrittsanzeige im Stil eines Glasmorphismus für Social-Media-Anwendungen mit mattglasähnlichen, durchscheinenden Elementen mit Unschärfeeffekten. Es verwendet ein analoges Farbschema und bietet eine komplexe, reichhaltige Benutzeroberfläche mit mehreren interaktiven Elementen. Die Komponente ist responsiv und unterstützt ein dunkles Theme mit Tailwind CSS.

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

Komponente "Fortschrittsindikatoren"

Eine einfache, reaktionsschnelle Komponente für Fortschrittsanzeigen mit Neon-/Leuchteffekten und Juwelentönen, die sich für Beratungs-/Service-Websites eignet. Inklusive Unterstützung für den Dunkelmodus.

Offen