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

Indicatore

Un componente della barra di avanzamento reattivo con supporto della modalità scura per l'e-commerce, caratterizzato da una combinazione di colori vivaci e un layout semplice.

Aperto

Componente della barra di avanzamento

Un componente della barra di avanzamento reattivo progettato per la modalità oscura utilizzando Tailwind CSS, adatto per le moderne applicazioni web.

Aperto

Luxury_Grayscale_Social_Media_Progress_Bar

Un componente della barra di avanzamento complesso, elegante e reattivo per le interfacce dei social media, caratterizzato da un design di lusso in scala di grigi con tipografia sofisticata e supporto per la modalità oscura.

Aperto