CCHub Logo CCHub Tailwind Collection
Komponenten Fortschrittsbalken Fortschrittsbalken für Neumorphismus

Fortschrittsbalken für Neumorphismus

Ein Fortschrittsbalken im Neumorphism-Stil für Portfolios mit pastellfarbenem Farbschema, mäßiger Komplexität, Reaktionsfähigkeit und Unterstützung für dunkle Themen. Es ist kein JavaScript enthalten; Die Komponente wird mit HTML und Tailwind CSS erstellt.

Vorschau

HTML-Code 

<div class="flex flex-col items-center justify-center h-screen bg-gray-100 dark:bg-gray-800 p-4">
  <div class="w-full max-w-md bg-gray-200 dark:bg-gray-700 rounded-full shadow-inner dark:shadow-inner-dark overflow-hidden">
    <div class="bg-purple-400 text-xs leading-none py-1 text-center text-white rounded-full shadow-neumo-progress dark:shadow-neumo-progress-dark" style="width: 75%"> 75% </div>
  </div>
  <div class="mt-8 text-gray-700 dark:text-gray-300">
    Skill Progress
  </div>
</div>

<style>
.shadow-inner {
  box-shadow: inset 5px 5px 10px #b0b0b0,
              inset -5px -5px 10px #f0f0f0;
}

.dark .shadow-inner-dark {
  box-shadow: inset 5px 5px 10px #4a4a4a,
              inset -5px -5px 10px #363636;
}

.shadow-neumo-progress {
  box-shadow: 5px 5px 10px #a78bfa,
              -5px -5px 10px #c084fc;
}

.dark .shadow-neumo-progress-dark {
  box-shadow: 5px 5px 10px #6d28d9,
              -5px -5px 10px #7c3aed;
}
</style>

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

Neumorpher Fortschrittsbalken

Eine reaktionsschnelle Fortschrittsleisten-Komponente, die im Neumorphism-Stil entwickelt wurde und sowohl helle als auch dunkle Designs mit Tailwind CSS unterstützt.

Offen

Komponente der Fortschrittsleiste

Eine einfache Fortschrittsbalkenkomponente im Stil von Glasmorphismus und monochromen Farben, geeignet für Geschäfts- und Unternehmenswebsites, mit Unterstützung für den Dunkelmodus.

Offen