Progress bar

Da Wikipedia, l'enciclopedia libera.
Jump to navigation Jump to search
esempio di Progress bar, con indicatore di progresso al 50%

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.

Storia[modifica | modifica wikitesto]

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

Design[modifica | modifica wikitesto]

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 web[modifica | modifica wikitesto]

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 indeterminata[modifica | modifica wikitesto]

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

Applicazioni[modifica | modifica wikitesto]

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[modifica | modifica wikitesto]

Note[modifica | modifica wikitesto]

  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 progetti[modifica | modifica wikitesto]

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