Unito.it

Tema Unito v 3 / 3.1

Progress Indicators

Indica in maniera visuale lo stato attivo e di avanzamento di un’operazione

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.

Esempio

Caricamento 10%

Caricamento 75%

<div class="container">
  <div class="row">
    <div class="col-12 col-sm-6">
      <p><strong>Caricamento 10%</strong></p>
      <div class="progress-donut-wrapper">
        <div class="progress-donut" id="prog-donut-1" data-bs-progress-donut data-bs-value="0.10" ></div>
        <span class="visually-hidden">Caricamento in corso</span>
      </div>
    </div>
    <div class="col-12 col-sm-6">
      <p><strong>Caricamento 75%</strong></p>
      <div class="progress-donut-wrapper">
        <div class="progress-donut" id="prog-donut-2" data-bs-progress-donut data-bs-value="0.75" ></div>
        <span class="visually-hidden"></span>
      </div>
    </div>
  </div>
</div>

E' anche possibile istanziare l'oggetto via Javascript:

<script>
        // istanzazione via javascript, per il Donut al 10% sopra in esempio
        var progElement = document.getElementById('prog-donut-1');
        var progDonut = new bootstrap.ProgressDonut(progElement, {
            value: 0.10,
        });
</script>

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 #EA0029 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.

  • 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.

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.

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.

75%
<!-- senza indicatore -->
<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<!-- con indicatore -->
<div class="progress-bar-wrapper mt-5 mb-5">
  <div class="progress-bar-label"><span class="visually-hidden">Progresso </span>75%</div>
  <div class="progress">
    <div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
  </div>
</div>
<!-- indeterminato -->
<div class="progress progress-indeterminate">
  <span class="visually-hidden">In elaborazione...</span>
  <div class="progress-bar" role="progressbar"></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

<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>
Torna su