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.
Codice HTML
<div class="flex flex-col items-center justify-center h-screen bg-gray-900 dark:bg-gray-800">
<div class="bg-white dark:bg-gray-700 bg-opacity-30 backdrop-blur-md border border-gray-500 rounded-lg p-6 shadow-lg w-1/2">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Progress</h2>
<div class="relative w-full h-4 rounded-full bg-gray-300 dark:bg-gray-600">
<div class="absolute top-0 left-0 h-4 rounded-full bg-blue-500" style="width: 70%;"></div>
</div>
<span class="text-base text-gray-800 dark:text-gray-200 mt-2">70%</span>
</div>
</div>Componenti correlati
Componente della barra di avanzamento
Un componente della barra di avanzamento reattivo progettato con elementi 3D, utilizzando una combinazione di colori analoga adatta all'e-commerce, con supporto per la modalità oscura
Componente della barra di avanzamento
Un componente della barra di avanzamento reattivo progettato in stile Material Design, che incorpora combinazioni di colori pastello per le vetrine del portfolio. Supporta la modalità oscura.
Indicatore
Componente della barra di avanzamento con progettazione di microinterazioni. Include effetti reattivi e supporto per temi scuri utilizzando solo HTML e CSS (Tailwind CSS).