Componenti Indicatore Barra di avanzamento del neumorfismo

Barra di avanzamento del neumorfismo

Una barra di avanzamento in stile neumorfismo per i portfolio, con una combinazione di colori pastello, complessità moderata, reattività e supporto per temi scuri. Non è incluso alcun JavaScript; il componente è costruito con HTML e Tailwind CSS.

Anteprima

Codice HTML

<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>

Componenti correlati

Componente della barra di avanzamento

Un semplice componente della barra di avanzamento con glassmorphism e colori monocromatici, adatto per siti Web aziendali e aziendali, con supporto per la modalità scura.

Aperto

Componente della barra di avanzamento

Un componente della barra di avanzamento reattivo progettato pensando alla modalità scura, utilizzando Tailwind CSS.

Aperto

Componente Barra di avanzamento 3D

Un componente della barra di avanzamento reattivo progettato per le interfacce di social networking, con un effetto 3D, una combinazione di colori monocromatica e il supporto della modalità scura, creato utilizzando Tailwind CSS.

Aperto