Barra di avanzamento del neumorfismo
Un componente della barra di avanzamento in stile neumorfismo reattivo progettato per i dashboard, che incorpora una funzione interattiva e supporta la modalità oscura.
Codice HTML
<div class="max-w-md mx-auto mt-10 p-5 bg-gray-100 dark:bg-gray-800 rounded-xl shadow-md">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-3">Progress Bar</h2>
<div class="relative pt-1">
<div class="flex justify-between mb-1">
<span class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-teal-600 bg-teal-200 dark:bg-teal-600 dark:text-teal-200">Task 1</span>
<span class="text-xs font-semibold text-gray-600 dark:text-gray-400">70%</span>
</div>
<div class="flex items-center h-2 bg-gray-300 dark:bg-gray-600 rounded-full">
<div class="h-full bg-teal-400 rounded-full transition-all duration-300 w-7/12"></div>
</div>
</div>
<div class="relative pt-1">
<div class="flex justify-between mb-1">
<span class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-purple-600 bg-purple-200 dark:bg-purple-600 dark:text-purple-200">Task 2</span>
<span class="text-xs font-semibold text-gray-600 dark:text-gray-400">40%</span>
</div>
<div class="flex items-center h-2 bg-gray-300 dark:bg-gray-600 rounded-full">
<div class="h-full bg-purple-400 rounded-full transition-all duration-300 w-5/12"></div>
</div>
</div>
<div class="relative pt-1">
<div class="flex justify-between mb-1">
<span class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-blue-600 bg-blue-200 dark:bg-blue-600 dark:text-blue-200">Task 3</span>
<span class="text-xs font-semibold text-gray-600 dark:text-gray-400">90%</span>
</div>
<div class="flex items-center h-2 bg-gray-300 dark:bg-gray-600 rounded-full">
<div class="h-full bg-blue-400 rounded-full transition-all duration-300 w-11/12"></div>
</div>
</div>
</div>Componenti correlati
Barra di avanzamento arcobaleno sfumato per la fotografia
Un componente della barra di avanzamento complesso e reattivo per i portfolio fotografici, caratterizzato da un design arcobaleno sfumato multicolore e supporto per la modalità scura. Ideale per mostrare il caricamento delle foto o la progressione della galleria.
Barra di avanzamento della modalità oscura triadica
Un componente della barra di avanzamento semplice e triadicato per la modalità scura, adatto per blog e consumo di contenuti. Presenta un design reattivo con Tailwind CSS, utilizzando il prefisso dark: per il supporto del tema scuro senza JavaScript.
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.