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
Creare moduli CSS in React
Personalizzare l'errore del rate limiting middleware in ASP.NET Core
.NET Conference Italia 2023
Creare un'applicazione React e configurare Tailwind CSS
Determinare lo stato di un pod in Kubernetes
Utilizzare il trigger SQL con le Azure Function
Load test di ASP.NET Core con k6
Aggiungere interattività lato server in Blazor 8
Limitare le richieste lato server con l'interactive routing di Blazor 8
Eseguire un metodo asincrono dopo il set di una proprietà in Blazor 8
Implementare l'infinite scroll con QuickGrid in Blazor Server
Utilizzare Model as a Service su Microsoft Azure
I più letti di oggi
- Elencare gli utenti di un dominio NT con ADSI
- Creare un messaggio di posta in diversi formati con ASP.NET 2.0
- Utilizzare SQL e #linq per eseguire una query con #entityframework Core https://aspit.co/bfv di @sm15455 #efcore1
- Utilizzare il metodo reduce in #javascript https://aspit.co/ccc di @morwalpiz
- Disponibile il codice sorgente di ASP.NET MVC
- rilasciati nuovi template per la #aspnet web pages. funzionano anche con #webmatrix: http://u.aspitalia.com/lu