Timeline
Chat
Prospettiva

Barra di progresso

elemento dell'interfaccia utente Da Wikipedia, l'enciclopedia libera

Barra di progresso
Remove ads

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.

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

Remove ads

Aspetti grafici

Riepilogo
Prospettiva
Thumb
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%; }
}
Thumb
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>
Remove ads

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

Remove ads

Esempi

Note

Altri progetti

Loading related searches...

Wikiwand - on

Seamless Wikipedia browsing. On steroids.

Remove ads