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
Graph API con .NET 5
Usare i Top Level statement in C#
Proteggere le risorse Azure da cancellazioni involontarie
Impostare l'auto-complete delle pull request in Azure DevOps
Esecuzione condizionale delle pipeline in Azure DevOps
Navigazione sfruttando i fragments con Angular
Le novità di C# 9
Disabilitare un pulsante in Blazor durante il salvataggio
Paginare un elenco con Blazor Server
Effettuare il tracing asincrono delle chiamate a un'applicazione ASP.NET Core
Linux development with WSL 2 and VS Code
Blazor e il pattern Model-View-ViewModel
I più letti di oggi
- Creare un web server locale con LiveReload
- Operatori di confronto in JavaScript: == e ===
- Microsoft WebCamp - Roma, Milano
- Dev Night #2: Serverless - Milano
- Disponibile la release finale di Moonlight 1.0
- Lancio ufficiale di Moonlight 1.0
- Disponibile il Silverlight Toolkit March 2009 Release
- MonoTouch in versione 1.0: C# per iPhone diventa realtà