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).
Codice HTML
<div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
<div class="bg-blue-600 h-2.5 rounded-full" style="width: 45%; animation: progress-animation 2s infinite;"></div>
</div>
<style>
@keyframes progress-animation {
0% { width: 0%; }
100% { width: 45%; }
}
.dark .bg-blue-600 {
background-color: #90cdf4; /* Lighter blue for dark mode */
}
/* Responsive considerations */
@media (max-width: 768px) {
@keyframes progress-animation {
0% { width: 0%; }
100% { width: 60%; } /* Wider progress on smaller screens */
}
.bg-blue-600 {
animation: progress-animation 2s infinite; /* Apply animation again for clarity */
}
}
</style>Componenti correlati
Barra di avanzamento della modalità oscura triadica
Un componente della barra di avanzamento semplice e triadicato per la modalità scura, adatto per blog e consumo di contenuti. Presenta un design reattivo con Tailwind CSS, utilizzando il prefisso dark: per il supporto del tema scuro senza JavaScript.
Barra di avanzamento del neumorfismo
Una barra di avanzamento in stile neumorfismo per i portfolio, con una combinazione di colori pastello, complessità moderata, reattività e supporto per temi scuri. Non è incluso alcun JavaScript; il componente è costruito con HTML e Tailwind CSS.
Barra di avanzamento del Glassmorphism
Barra di avanzamento in stile Glassmorphism progettata per le interfacce dei social media, con colori vivaci e supporto per la modalità scura. Layout semplice senza JavaScript.