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%.
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-donutnon deve essere incluso così da evitare
inizializzazioni automatiche che possono portare a comportamenti inaspettati.
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 .progress come contenitore che indica il valore massimo della barra di avanzamento.
Utilizziamo .progress-bar come barra interna per indicare fin dove si è arrivati con l’avanzamento.
La classe .progress-bar richiede 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.
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.
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.
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:
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.
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)
Predefinito
--bsi-progress-bg
Controls the progress bg, using color tokens.
var(--bsi-color-background-secondary-lighter)
--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-bar-bg
Controls the progress bar bg, using color tokens.
var(--bsi-color-background-secondary)
--bsi-progress-height
Controls the progress height.
4px
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)
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-white diventa .icon-inverse.