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.
Codice HTML
<div class="dark:bg-gray-900 p-4">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Reading Progress</h2>
<div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5 mb-4">
<div class="dark:bg-purple-500 h-2.5 rounded-full" style="width: 45%;"></div>
</div>
<div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5 mb-4">
<div class="dark:bg-yellow-500 h-2.5 rounded-full" style="width: 60%;"></div>
</div>
<div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5">
<div class="dark:bg-emerald-500 h-2.5 rounded-full" style="width: 75%;"></div>
</div>
</div>Componenti correlati
Barra di avanzamento Cyberpunk Neo-Retro
Un componente della barra di avanzamento di complessità moderata con un'estetica cyberpunk e neo-retrò, sfondi scuri e colori d'accento vintage tenui, progettato per piattaforme di intrattenimento/multimediali. È dotato di un display di avanzamento segmentato ed è completamente reattivo con il supporto della modalità oscura.
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.
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.