Progress bar

La progress bar è un indicatore di stato attivo e di avanzamento di un'operazione.
Qui potrai reperire la User Interface, lo snippet e le modalità di utilizzo per le progress bar nell’Ecosistema digitale Turismo Cultura.

Percentuale di completamento

25%

Percentuale di completamento: striped e animata

75%

                                            
<!-- Percentuale di completamento --> 
<div class="dms-progress progress">
    <div class="progress-bar" role="progressbar" style="width:25%;"
        aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%
    </div>
</div>

<!-- Percentuale di completamento striped e animata --> 
<div class="dms-progress progress">
    <div class="progress-bar-striped progress-bar-animated" role="progressbar" style="width:75%;"
    aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">75%
    </div>
</div>

Utilizzo

E' obbligatorio:

utilizzare la classe dms-progress progress (vedi snippet)
utilizzare l'attributo role="progressbar" ai fini dell'accessibilità
settare gli attributi aria-valuenow, aria-valuemin, aria-valuemax ai fini dell'accessibilità
impostare la width per indicare la percentuale di progresso
aggiungere all'elemento progress-bar le classi progress-bar-striped progress-bar-animated per visualizzare la barra in stile striped e in modalità animata tramite animazioni CSS3

Per ulteriori informazioni visita la pagina Progress di Bootstrap.