CCHub Logo CCHub Tailwind Collection
Komponenten Fortschrittsindikatoren Komponente "Fortschrittsindikatoren"

Komponente "Fortschrittsindikatoren"

Ein neumorph gestalteter Fortschrittsindikator, der für Social-Media-Schnittstellen geeignet ist und sich durch ein einfaches Layout und ein ansprechendes Design mit Unterstützung für den Dunkelmodus auszeichnet.

Vorschau

HTML-Code 

<div class="flex flex-col items-center justify-center p-6">
  <div class="w-full max-w-xs p-4 bg-gray-200 rounded-lg shadow-lg dark:bg-gray-800 dark:shadow-md">
    <h3 class="text-center text-lg font-semibold text-gray-800 dark:text-gray-200">Profile Completion</h3>
    <div class="my-4">
      <div class="flex justify-between">
        <span class="text-sm text-gray-600 dark:text-gray-400">0%</span>
        <span class="text-sm text-gray-600 dark:text-gray-400">100%</span>
      </div>
      <div class="h-2 bg-gray-300 rounded-lg dark:bg-gray-700">
        <div class="h-full bg-gradient-to-r from-green-400 to-blue-500 rounded-lg" style="width: 70%;"></div>
      </div>
    </div>
    <div class="flex items-center justify-between">
      <img src="https://picsum.photos/40" alt="User Avatar" class="rounded-full border-2 border-gray-300 dark:border-gray-600" />
      <span class="text-sm text-gray-800 dark:text-gray-200">User Name</span>
    </div>
  </div>
</div>

Verwandte Komponenten

Komponente "Glassmorphism-Fortschrittsindikatoren"

Glassmorphism Progress Indicators Komponente mit lebendigem Farbschema und einfacher Komplexität.

Offen

Memphis_Gaming_Progress_Indicators

Eine komplexe, reaktionsschnelle Komponente für Fortschrittsindikatoren für Spiele, inspiriert von Memphis Design mit einem Farbschema für den Sonnenuntergang. Verfügt über mehrere Fortschrittsbalken, Ebenenanzeige und interaktive Elemente mit Unterstützung für den Dunkelmodus.

Offen

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