Progress bar

Il progress bar (in italiano indicatore di progresso) è un componente UI (Interfaccia utente) usato per indicare lo stato di avanzamento di un lungo processo come il download o il trasferimento di un file.

esempio di Progress bar, con indicatore di progresso al 50%

StoriaModifica

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

DesignModifica

 
Un semplice esempio animato di progress bar

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 webModifica

Di seguito un esempio di progress bar HTML-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>

Progress bar indeterminataModifica

Nel caso in cui non si voglia indicare l'avanzamento di un processo ma in generale solo "l'occupazione" del sistema, si parla di "indeterminate progress bar", usato 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].

ApplicazioniModifica

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

EsempiModifica

NoteModifica

  1. ^ (EN) What does progress bar mean?, su www.definitions.net. URL consultato il 18 febbraio 2021.
  2. ^ (EN) The History of the Humble Progress Bar, su Growth Engineering, 26 giugno 2014. URL consultato il 18 febbraio 2021.
  3. ^ (EN) Gantt.com, su Gantt.com. URL consultato il 18 febbraio 2021.
  4. ^ (EN) Mitchell L. Model, Monitoring System Behavior in a Complex Computational Environment, Department of Computer Science, Stanford University., 1979. URL consultato il 18 febbraio 2021.
  5. ^ Meyers, su researchgate.net.
  6. ^ Indeterminate Progress Bars, su docs.oracle.com. URL consultato il 18 febbraio 2021.
  7. ^ VistaProgressBar - Development Stuff, su dev.nomad-net.info. URL consultato il 18 febbraio 2021.
  8. ^ ProgressBar.js - Progress bars with JavaScript, su kimmobrunfeldt.github.io. URL consultato il 18 febbraio 2021.

Altri progettiModifica

  Portale Informatica: accedi alle voci di Wikipedia che trattano di informatica