Componente degli indicatori di avanzamento del Glassmorphism
Componente degli indicatori di avanzamento Glassmorphism con combinazione di colori vibrante e complessità semplice.
Codice HTML
<div class="flex flex-col items-center justify-center min-h-screen dark:bg-gray-900">
<div class="dark:bg-gray-800 bg-white bg-opacity-20 dark:bg-opacity-20 backdrop-filter backdrop-blur-lg dark:backdrop-blur-lg rounded-lg p-6 shadow-xl dark:shadow-xl">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Progress</h2>
<div class="w-64 h-4 bg-gray-300 rounded-full overflow-hidden dark:bg-gray-700">
<div class="h-full bg-gradient-to-r from-cyan-400 to-blue-500 dark:from-cyan-600 dark:to-blue-700 w-3/4 rounded-full"></div>
</div>
<p class="text-sm text-gray-700 dark:text-gray-300 mt-2">75% Complete</p>
</div>
</div>Componenti correlati
Componente Indicatori di progresso
Un componente dell'indicatore di progresso in stile lusso/premium progettato per applicazioni sportive/fitness, caratterizzato da toni gioiello, tipografia sofisticata e reattività completa con supporto per la modalità scura.
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 Indicatori di progresso
Un semplice indicatore di avanzamento progettato con un effetto glassmorphism, adatto per siti di e-commerce con supporto alla modalità scura e una combinazione di colori monocromatica.