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

Fortschrittsbalken

Fortschrittsbalkenkomponente mit Mikrointeraktionsdesign. Enthält reaktionsschnelle Effekte und Unterstützung für dunkle Themen, die nur HTML und CSS (Tailwind CSS) verwenden.

Offen

Komponente der Fortschrittsleiste

Eine einfache, reaktionsschnelle Komponente des Fortschrittsbalkens mit Material Design-Einflüssen und warmen Sonnenuntergangstönen. Ideal für Technologie-/SaaS-Anwendungen, mit Unterstützung für den Dunkelmodus.

Offen

Komponente der Fortschrittsleiste

Eine reaktionsschnelle Fortschrittsleisten-Komponente, die für den Dunkelmodus mit Tailwind CSS entwickelt wurde und für moderne Webanwendungen geeignet ist.

Offen