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
Attivazione tramite codice
Nel caso in cui si desidera che il componente sia inizializzato in maniera automatica
utilizzare l’attributo data-bs-progress-donut per la sua inizializzazione.
Nel caso in cui si desidera importare e inizializzare autonomamente il componente
l’attributo data-bs-progress-donut non deve essere incluso così da evitare
inizializzazioni automatiche che possono portare a comportamenti inaspettati.
Per maggiori informazioni consulta la sezione JavaScript di Bootstrap Italia.
È possibile creare un’istanza di ProgressDonut con il constructor, ad esempio:
1
2
3
4
5
import { ProgressDonut } from 'bootstrap-italia'
const progElement = document.getElementById('prog-donut-1')
const progDonut = new 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 |
|---|---|
| getInstance | Metodo statico che consente di ottenere l'istanza di avviso associata a un elemento DOM, è possibile utilizzarlo in questo modo: ProgressDonut.getInstance(domElement). |
| getOrCreateInstance | Metodo statico che restituisce un'istanza di avviso associata a un elemento DOM o ne crea una nuova nel caso in cui non fosse stata inizializzata. Puoi utilizzarla in questo modo: ProgressDonut.getOrCreateInstance(element). |
| dispose | Rimuove la funzionalità ProgressDonut. |
| set | modifica lo stato di progressione della barra. È necessario inserire un numero compreso tra 0 e 1.0 |
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
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.
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.
Colori
Per variare il colore della barra è sufficiente aggiungere una delle classi contenute nelle Utility colori alla Progress Bar.
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
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
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
Properties Progress
Il selettore da utilizzare per le sovrascrittura delle property è .progress.
La descrizione delle custom properties è in inglese perché risiede nei files .scss dei componenti.
Properties statiche
| Variabile CSS | Descrizione (Inglese) | Valore predefinito |
|---|---|---|
--bsi-progress-border-radius |
Controls the progress border radius, using radius tokens. | var(--bsi-radius-smooth) |
--bsi-progress-box-shadow |
Controls the progress box shadow. | inset 0 1px 2px rgba(0, 0, 0, 0.075) |
--bsi-progress-label-color |
Controls the progress label color, using color tokens. | var(--bsi-color-text-secondary) |
--bsi-progress-label-font-size |
Controls the progress label font size, using typography tokens. | var(--bsi-label-font-size-xs) |
--bsi-progress-bar-transition |
Controls the progress bar transition. | width 0.5s ease |
--bsi-progress-height |
Controls the progress height. | 4px |
Properties dinamiche
Nella colonna "Valore predefinito" è possibile trovare, oltre al valore di base, un’indicazione delle eventuali varianti responsive/tema/stato della property stessa:
fare riferimento ai file elencati nella colonna "File SCSS" per il dettaglio dei valori e del contesto di applicazione.
| Variabile CSS | Descrizione (Inglese) | Valore predefinito | File SCSS |
|---|---|---|---|
--bsi-progress-bg |
Controls the progress bg, using color tokens. | var(--bsi-color-background-secondary-lighter) +1 |
_navscroll.scss_progress-bars.scss |
--bsi-progress-bar-bg |
Controls the progress bar bg, using color tokens. | var(--bsi-color-background-secondary) +1 |
_navscroll.scss_progress-bars.scss |
Properties Progress Spinner
Il selettore da utilizzare per le sovrascrittura delle property è .progress-spinner.
La descrizione delle custom properties è in inglese perché risiede nei files .scss dei componenti.
Properties statiche
| Variabile CSS | Descrizione (Inglese) | Valore predefinito |
|---|---|---|
--bsi-progress-spinner-bg |
Controls the progress spinner bg, using color tokens. | var(--bsi-color-border-secondary) |
--bsi-progress-spinner-size |
Controls the progress spinner size. | 48px |
--bsi-progress-spinner-size-sm |
Controls the progress spinner size sm. | 32px |
--bsi-progress-spinner-size-lg |
Controls the progress spinner size lg. | 64px |
--bsi-progress-spinner-size-xl |
Controls the progress spinner size xl. | 80px |
--bsi-progress-spinner-border-width |
Controls the progress spinner border width. | 4px |
--bsi-progress-spinner-animation-duration |
Controls the progress spinner animation duration. | 0.75s |
Breaking change
- Nella variante “Pulsante con Progress Bar” la classe che controlla il colore dell’icona ha cambiato nome:
.icon-whitediventa.icon-inverse.