Componente Barra di avanzamento 3D
Progettato con effetti 3D, Tailwind CSS, design reattivo e supporto per la modalità oscura.
Codice HTML
<div class='relative pt-1 dark:bg-gray-800'>
<div class='overflow-hidden h-2 text-xs flex rounded bg-gray-200 dark:bg-gray-700'>
<div style='width: 45%' class='shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-blue-500 dark:bg-blue-400'></div>
</div>
<div class='mt-2 text-right text-xs dark:text-gray-400'>45% Complete</div>
</div>Componenti correlati
Componente Indicatori di progresso
Un componente indicatore di stato in stile glassmorphism per applicazioni di social media, con elementi traslucidi simili al vetro smerigliato con effetti di sfocatura. Utilizza una combinazione di colori analoga e offre un'interfaccia complessa e ricca con più elementi interattivi. Il componente è reattivo e supporta un tema scuro con Tailwind CSS.
Componente Indicatori di progresso
Un componente reattivo degli indicatori di stato progettato per un dashboard dell'interfaccia utente in modalità scura con una combinazione di colori analoga. Include vari indicatori di avanzamento come barre, cerchi e un feed di attività, il tutto in stile CSS Tailwind per il supporto della modalità oscura. Non viene utilizzato alcun JavaScript.
Componente degli indicatori di avanzamento del Glassmorphism
Componente degli indicatori di avanzamento Glassmorphism con combinazione di colori vibrante e complessità semplice.