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
Barra di avanzamento minimalista
Un componente della barra di avanzamento dal design minimalista e piatto con colori pastello, adatto per siti Web aziendali o aziendali professionali. Ha un design reattivo e supporta la modalità oscura utilizzando Tailwind CSS.
Componente della barra di avanzamento
Un componente della barra di avanzamento semplice e reattivo con influenze Material Design, che utilizza toni caldi del tramonto. Ideale per applicazioni tecnologiche/SaaS, con supporto per la modalità scura.
Barra di avanzamento triadica minimalista
Una barra di avanzamento minimalista e reattiva con combinazione di colori triadica e supporto per temi scuri, adatta per applicazioni di social media.