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
Cambiare automaticamente lo stato di un work item in una pipeline di Azure DevOps
Utilizzare gli operatori di RxJS per gestire operazioni asincrone con Javascript e TypeScript
Un pattern per gestire il pre-rendering in componenti Blazor complessi
PWAConf 2020
Scrivere HTML con Emmet
Progressive Web Apps with Angular
Creare un web server locale con LiveReload
Validazione dei parametri con le Guard API della Universal Windows Platform
Sviluppare codice nativo per Windows e Linux con .NET Core
Point-in-time restore con Azure Cosmos DB
Creare un componente Button in Blazor per operazioni asincrone
Creare un Module Initializer in .NET 5