Barra di progresso

La barra di progresso (in inglese progress bar) o barra di avanzamento è un componente dell'Interfaccia utente usato per indicare lo stato di avanzamento di un dato processo come il download o il trasferimento di un file.

Esempio di barra di progresso, dove l'indicatore è al 50%

Storia

Il concetto di barra di avanzamento è stato inventato prima del calcolo digitale. Nel 1896 Karol Adamiecki sviluppò un diagramma che chiamò armonogramma, che oggi è meglio conosciuto come diagramma di Gantt^[1]. Adamiecki non pubblicò la sua carta fino al 1931 e poi solo in polacco^[2]. Il grafico quindi ora porta il nome di Henry Gantt (1861-1919), che lo ha progettato intorno agli anni 1910-1915 e lo ha reso popolare in Occidente^[3].

Adottando il concetto al computing, la prima barra di avanzamento grafica è apparsa nella tesi di dottorato di Mitchell Model del 1979, Monitoring System Behavior in a Complex Computational Environment^[4]. Nel 1985 Brad Myers ha presentato un documento sugli "indicatori di progresso fatti in percentuale" a una conferenza sulle interazioni uomo-computer.^[5]

Aspetti grafici

Animazione che esemplifica l'avanzamento di una barra di progresso

Solitamente è disegnato come un'area rettangolare stretta e lunga che si “riempie” da sinistra verso destra durante il completamento dell'operazione. Il riempimento dell'area rettangolare è solitamente o un'altra barra rettangolare continua interna o una serie di piccoli blocchi separati tra di loro. Spesso la parte grafica del componente è accompagnata da una rappresentazione testuale in formato percentuale dell'informazione.

Codice web

Di seguito un esempio di progress bar scritta con HTML e CSS:

<div class="progress">
  <div class="progress-value"></div>
</div>

body {
  justify-content: center;
  align-items: center;
  background: #000;
  display: flex;
  padding: 0;
  margin: 0;
}

.progress {
  background: red;
  justify-content: flex-start;
  border-radius: 80px;
  align-items: center;
  position: relative;
  padding: 0 5px;
  display: flex;
  height: 40px;
  width: 500px;
}

.progress-value {
  animation: load 3s normal forwards;
  box-shadow: 0 10px 40px -10px #fff;
  border-radius: 80px;
  background: #fff;
  height: 30px;
  width: 0;
}

@keyframes load {
  0% { width: 0; }
  100% { width: 58%; }
}

Risultato

Per aumentare l'accessibilità della progress bar si possono usare dei tag facenti parte delle regole WAI-ARIA:

<div role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">20 %</div>

<div role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuetext="Step 2" aria-valuemax="100">
  Step 2
</div>

Barra di progresso indeterminata

Nel caso in cui non si voglia o non si possa indicare l'avanzamento di un processo ma in generale solo la sua presa in carico da parte del sistema, si parla di "barra di progresso indeterminata" (in inglese indeterminate progress bar). Viene usata principalmente quando la dimensione o la durata del processo non è determinabile a priori. Queste "barre" utilizzano una generica animazione solitamente per indicare il progresso.^[6]

Applicazioni

Il loro utilizzo è molto indicato per le applicazioni web, in quanto spesso per ottenere dei valori realistici di percentuale del processo è necessario eseguire più operazioni del processo stesso.

In Windows Vista, ad esempio, le "barre" sono state sostituite da una linea colorata continua^[7]: la progress bar che probabilmente osserviamo più spesso è quella che troviamo in qualsiasi browser per verificare il caricamento di una pagina web^[8].

Esempi

• 
  Esempio di barra di progresso creativa con un'immagine al posto della zona di caricamento che di solito ha un colore
• 
  Barra di progresso suddivisa nei passaggi da compiere in un modulo di registrazione
• 
  Indicatori di progresso circolari