Progress Indicators
Indicatori di stato attivo e di avanzamento di un’operazione.
Donuts
L’elemento Donut utilizza un cerchio, un semicerchio e testo per indicare il progresso o l’avanzamento di un’operazione in corso. Il componente si basa sul plugin javascript ProgressJS.
Nel seguente esempio sono presenti un Donut appena inizializzato ed un Donut al 75%.
Stato iniziale
Attivo
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="container">
<div class="row">
<div class="col-12 col-sm-6">
<p><strong>Stato iniziale</strong></p>
<div class="progress-donut-wrapper">
<div class="progress-donut" id="prog-donut-1" data-bs-progress-donut></div>
<span class="visually-hidden"></span>
</div>
</div>
<div class="col-12 col-sm-6">
<p><strong>Attivo</strong></p>
<div class="progress-donut-wrapper">
<div class="progress-donut" data-bs-progress-donut data-bs-value="0.75" id="prog-donut-2"></div>
<span class="visually-hidden"></span>
</div>
</div>
</div>
</div>
Attivazione tramite JavaScript
È possibile creare un’istanza con il constructor, ad esempio:
1
2
3
4
var progElement = document.getElementById('prog-donut-1')
var progDonut = new bootstrap.ProgressDonut(progElement, {
value: 0.25,
})
Opzioni
Le opzioni possono essere passate tramite gli attributi data o tramite JavaScript. Per quanto riguarda gli attributi data, aggiungi il nome dell’opzione a data-bs, come in data-bs-value="".
| Nome | Tipo | Predefinito | Descrizione |
|---|---|---|---|
| color | string | #0073E6 | colore della barra |
| trailColor | string | #D4E9FF | colore della guida della barra |
| strokeWidth | number | 24 | spessore della barra |
| trailWidth | number | 6 | spessore della guida barra |
| easing | string | easeInOut | inerzia dell'animazione |
| animate | boolean | true | attiva/disattiva l'animazione |
| value | number | 0 | valore che indica la percentuale di completamento. Deve essere compreso tra 0 e 1.0 |
Metodi
| Metodo | Descrizione |
|---|---|
| set | modifica lo stato di progressione della barra. È necessario inserire un numero compreso tra 0 e 1.0 |
| dispose | Elimina la funzionalità del progressive donut. |
| getInstance | Metodo statico che restituisce l'istanza collapse associata ad un elemento del DOM. Esempio: bootstrap.ProgressDonut.getInstance(element) |
| getOrCreateInstance | Metodo statico che restituisce un'istanza collapse associata ad un elemento del DOM o ne crea una nuova nel caso non fosse stata inizializzata. Esempio: bootstrap.ProgressDonut.getOrCreateInstance(element) |
Progress Bar
Le Progress Bar sono costruite con due elementi HTML, CSS in linea per impostare la larghezza e alcuni attributi. Non è previsto l’utilizzo dell’elemento <progress> di HTML5.
- Utilizziamo
.progresscome contenitore che indica il valore massimo della barra di avanzamento. - Utilizziamo
.progress-barcome barra interna per indicare fin dove si è arrivati con l’avanzamento. - La classe
.progress-barrichiede uno stile inline, una classe di utility di dimensionamento o un CSS personalizzato per impostare la larghezza.
Accessibilità
Per rendere accessibile l’elemento .progress-bar sono necessari alcuni attributi role e ARIA.
Esempio
1
2
3
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
Etichette
Per aggiungere etichette con testo che indica il progresso racchiudere la Progress Bar in un <div> con classe .progress-bar-wrapper e aggiungere un <div> interno con classe .progress-bar-label.
Non dimenticare il testo esplicativo dedicato agli Screen Reader all’interno di questo elemento.
1
2
3
4
5
6
<div class="progress-bar-wrapper">
<div class="progress-bar-label"><span class="visually-hidden">Progresso </span>35%</div>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
Progresso Indeterminato
Quando non è possibile stabilire una percentuale di progressione utilizzare una Progress Bar di tipo indeterminato, aggiungendo una classe .progress-indeterminate al contenitore .progress ed eliminando gli attributi aria- dalla Progress Bar.
1
2
3
4
<div class="progress progress-indeterminate">
<span class="visually-hidden">In elaborazione...</span>
<div class="progress-bar" role="progressbar"></div>
</div>
Colori
Per variare il colore della barra è sufficiente aggiungere la classe .progress-color al <div> contenitore ed applicare una delle classi contenute nelle Utility colori alla Progress Bar.
1
2
3
4
5
6
7
8
9
10
11
12
<div class="progress progress-color">
<div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress progress-color">
<div class="progress-bar bg-info" role="progressbar" style="width: 33%" aria-valuenow="33" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress progress-color">
<div class="progress-bar bg-warning" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress progress-color">
<div class="progress-bar bg-danger" role="progressbar" style="width: 66%" aria-valuenow="66" aria-valuemin="0" aria-valuemax="100"></div>
</div>
Pulsante con Progress Bar
La Progress Bar può essere integrata in un pulsante Primario o Secondario con classe aggiuntiva .btn-progress utilizzando la struttura e le classi riportate nei seguenti esempi:
Pulsante primario
Pulsante secondario
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div class="container">
<div class="row">
<div class="col-12 col-sm-6">
<p><strong>Pulsante primario</strong></p>
<button type="button" class="btn btn-primary btn-progress disabled" disabled>
Label pulsante <svg class="icon icon-white"><use href="/bootstrap-italia/dist/svg/sprites.svg#it-github"></use></svg>
<span class="progress">
<span class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></span>
</span>
</button>
</div>
<div class="col-12 col-sm-6">
<p><strong>Pulsante secondario</strong></p>
<button type="button" class="btn btn-secondary btn-progress disabled" disabled>
Label pulsante <svg class="icon icon-white"><use href="/bootstrap-italia/dist/svg/sprites.svg#it-github"></use></svg>
<span class="progress">
<span class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></span>
</span>
</button>
</div>
</div>
</div>
Spinner
L’elemento Spinner comunica lo stato attivo di un’operazione ma non il progresso percentuale della stessa. È utile quindi quando non è possibile determinare il tempo necessario a completare una procedura.
Per ottenere una versione ridotta dello Spinner aggiungere allo stesso la classe .size-sm. Notare l’inclusione di uno <span> riservato agli screen reader.
Spinner standard
Spinner Attivo
Small
Small attivo
Large
Large Attivo
Extra-large
Extra-large attivo
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<div class="container">
<div class="row">
<div class="col-6 col-lg-3">
<p class="mb-3"><strong>Spinner standard</strong></p>
<div class="progress-spinner">
<span class="visually-hidden">Caricamento...</span>
</div>
</div>
<div class="col-6 col-lg-3">
<p class="mb-3"><strong>Spinner Attivo</strong></p>
<div class="progress-spinner progress-spinner-active">
<span class="visually-hidden">Caricamento...</span>
</div>
</div>
<div class="col-6 col-lg-3 mt-3 mt-lg-0">
<p class="mb-3"><strong>Small</strong></p>
<div class="progress-spinner size-sm">
<span class="visually-hidden">Caricamento...</span>
</div>
</div>
<div class="col-6 col-lg-3 mt-3 mt-lg-0">
<p class="mb-3"><strong>Small attivo</strong></p>
<div class="progress-spinner progress-spinner-active size-sm">
<span class="visually-hidden">Caricamento...</span>
</div>
</div>
</div>
<div class="row">
<div class="col-6 col-lg-3">
<p class="mb-3"><strong>Large</strong></p>
<div class="progress-spinner size-lg">
<span class="visually-hidden">Caricamento...</span>
</div>
</div>
<div class="col-6 col-lg-3">
<p class="mb-3"><strong>Large Attivo</strong></p>
<div class="progress-spinner progress-spinner-active size-lg">
<span class="visually-hidden">Caricamento...</span>
</div>
</div>
<div class="col-6 col-lg-3 mt-3 mt-lg-0">
<p class="mb-3"><strong>Extra-large</strong></p>
<div class="progress-spinner size-xl">
<span class="visually-hidden">Caricamento...</span>
</div>
</div>
<div class="col-6 col-lg-3 mt-3 mt-lg-0">
<p class="mb-3"><strong>Extra-large attivo</strong></p>
<div class="progress-spinner progress-spinner-active size-xl">
<span class="visually-hidden">Caricamento...</span>
</div>
</div>
</div>
</div>
Spinner doppio
Aggiungendo la classe .progress-spinner-double allo Spinner si ottiene un’animazione alternativa.
Spinner doppio
Doppio attivo
Doppio small
Doppio small attivo
Doppio large
Doppio large attivo
Doppio extra-large
Doppio extra-large attivo
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<div class="container">
<div class="row">
<div class="col-6 col-lg-3">
<p class="mb-3"><strong>Spinner doppio</strong></p>
<div class="progress-spinner progress-spinner-double">
<div class="progress-spinner-inner"></div>
<div class="progress-spinner-inner"></div>
<span class="visually-hidden">Caricamento...</span>
</div>
</div>
<div class="col-6 col-lg-3">
<p class="mb-3"><strong>Doppio attivo</strong></p>
<div class="progress-spinner progress-spinner-double progress-spinner-active">
<div class="progress-spinner-inner"></div>
<div class="progress-spinner-inner"></div>
<span class="visually-hidden">Caricamento...</span>
</div>
</div>
<div class="col-6 col-lg-3 mt-3 mt-lg-0">
<p class="mb-3"><strong>Doppio small</strong></p>
<div class="progress-spinner progress-spinner-double size-sm">
<div class="progress-spinner-inner"></div>
<div class="progress-spinner-inner"></div>
<span class="visually-hidden">Caricamento...</span>
</div>
</div>
<div class="col-6 col-lg-3 mt-3 mt-lg-0">
<p class="mb-3"><strong>Doppio small attivo</strong></p>
<div class="progress-spinner progress-spinner-double size-sm progress-spinner-active">
<div class="progress-spinner-inner"></div>
<div class="progress-spinner-inner"></div>
<span class="visually-hidden">Caricamento...</span>
</div>
</div>
</div>
<div class="row">
<div class="col-6 col-lg-3">
<p class="mb-3"><strong>Doppio large</strong></p>
<div class="progress-spinner progress-spinner-double size-lg">
<div class="progress-spinner-inner"></div>
<div class="progress-spinner-inner"></div>
<span class="visually-hidden">Caricamento...</span>
</div>
</div>
<div class="col-6 col-lg-3">
<p class="mb-3"><strong>Doppio large attivo</strong></p>
<div class="progress-spinner progress-spinner-double size-lg progress-spinner-active">
<div class="progress-spinner-inner"></div>
<div class="progress-spinner-inner"></div>
<span class="visually-hidden">Caricamento...</span>
</div>
</div>
<div class="col-6 col-lg-3 mt-3 mt-lg-0">
<p class="mb-3"><strong>Doppio extra-large</strong></p>
<div class="progress-spinner progress-spinner-double size-xl">
<div class="progress-spinner-inner"></div>
<div class="progress-spinner-inner"></div>
<span class="visually-hidden">Caricamento...</span>
</div>
</div>
<div class="col-6 col-lg-3 mt-3 mt-lg-0">
<p class="mb-3"><strong>Doppio extra-large attivo</strong></p>
<div class="progress-spinner progress-spinner-double size-xl progress-spinner-active">
<div class="progress-spinner-inner"></div>
<div class="progress-spinner-inner"></div>
<span class="visually-hidden">Caricamento...</span>
</div>
</div>
</div>
</div>