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
ProgressBarComponent
Un componente della barra di avanzamento semplice, pulito e reattivo con colori Neon/Electric per siti Web di cibo/ristoranti, con supporto per la modalità oscura e design tipografico svizzero/internazionale.
Skeuomorphic_Monochromatic_Progress_Bar
Un componente della barra di avanzamento skeumorfica di complessità moderata per l'e-commerce, con una combinazione di colori monocromatica, piena reattività e supporto per la modalità scura.
Componente della barra di avanzamento della modalità scura
Un componente reattivo della barra di avanzamento in modalità oscura per siti Web aziendali/aziendali, che utilizza colori vivaci ed elementi interattivi.