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
Codice HTML
<div class="max-w-md mx-auto p-4">
<div class="relative h-8 bg-gray-300 rounded-md overflow-hidden dark:bg-gray-700">
<div class="absolute inset-0 transition-all duration-300 ease-out bg-gradient-to-r from-green-400 to-blue-400 dark:from-green-600 dark:to-blue-600" style="width: 70%;"></div>
<div class="absolute inset-0 flex items-center justify-center text-white font-semibold">
70%
</div>
</div>
<div class="mt-4 text-gray-700 dark:text-gray-300">
<p class="text-sm">Progress towards your shopping goals.</p>
</div>
</div>Componenti correlati
Indicatore
Un componente della barra di avanzamento reattivo con supporto della modalità scura per l'e-commerce, caratterizzato da una combinazione di colori vivaci e un layout semplice.
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.
Material Design Barra di avanzamento terrosa
Una barra di avanzamento ispirata al Material Design con toni della terra, adatta per le interfacce dei social media. È reattivo e include il supporto per la modalità oscura utilizzando Tailwind CSS.