Tra le tante funzionalità offerte da Bootstrap, ce n'è una che consente di creare progress bar. E' sufficiente un markup come questo:
<div class="progress"> <div class="progress-bar progress-bar-success progress-bar-striped" style="width:100%"> <span class="sr-only">100% completato</span> </div> </div>
E' possibile comunque avere pezzi differenti di una progress bar, per segnalare in maniera migliore delle percentuali. Ad esempio, con il markup che segue possiamo suddividere la barra, avendo due colori, uno per la parte completa e l'altro per la parte da completare:
<div class="progress"> <div class="progress-bar progress-bar-success progress-bar-striped" style="width: 50%"> <span class="sr-only">50% completato</span> </div> <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 50%"> <span class="sr-only">50% da completare</span> </div> </div>
La larghezza di ogni singola parte potrà comodamente essere calcolata lato client o server.
Bootstrap offre delle classi che seguono la classica nomenclatura (e la gamma colori) che abbiamo già utilizzato per bottoni o testi, per personalizzare al meglio il colore utilizzato da ciascuna delle parti della progress bar.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Effettuare chiamate con versioning da Blazor ad ASP.NET Core
Usare le variabili per personalizzare gli stili CSS
Inizializzare i container in Azure Container Apps
Sostituire la GitHub Action di login su private registry
Hosting di componenti WebAssembly in un'applicazione Blazor static
Sfruttare lo stream rendering per le pagine statiche di Blazor 8
Ottenere il contenuto di una cartella FTP con la libreria FluentFTP
Filtrare e rimuovere gli elementi dalla cache del browser tramite le API JavaScript
Creare alias per tipi generici e tuple in C#
Creare gruppi di client per Event Grid MQTT
Registrare servizi multipli tramite chiavi in ASP.NET Core 8
Ottimizzazione dei block template in Angular 17