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.
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]
Aspetti grafici
[modifica | modifica wikitesto]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 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%; }
}
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
[modifica | modifica wikitesto]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
[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]-
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
Note
[modifica | modifica wikitesto]- ^ (EN) What does progress bar mean?, su definitions.net. URL consultato il 18 febbraio 2021.
- ^ (EN) The History of the Humble Progress Bar, su Growth Engineering, 26 giugno 2014. URL consultato il 18 febbraio 2021.
- ^ (EN) Gantt.com, su Gantt.com. URL consultato il 18 febbraio 2021.
- ^ (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.
- ^ Meyers, su researchgate.net.
- ^ Indeterminate Progress Bars, su docs.oracle.com. URL consultato il 18 febbraio 2021.
- ^ VistaProgressBar - Development Stuff, su dev.nomad-net.info. URL consultato il 18 febbraio 2021.
- ^ ProgressBar.js - Progress bars with JavaScript, su kimmobrunfeldt.github.io. URL consultato il 18 febbraio 2021.
Altri progetti
[modifica | modifica wikitesto]Wikimedia Commons contiene immagini o altri file su barra di progresso