Bara de progres

exemplu de bara de progres, cu indicator de progres la 50%

Bara de progres (în italiană indicator de progres ) este o componentă UI ( User Interface ) utilizată pentru a indica progresul unui proces lung, cum ar fi descărcarea sau transferul unui fișier .

Istorie

Conceptul barei de progres a fost inventat înainte de calculul digital. În 1896 Karol Adamiecki a dezvoltat o diagramă pe care a denumit-o armonogramă , care este mai bine cunoscută astăzi sub denumirea de diagrama Gantt ^[1] . Adamiecki nu și-a publicat lucrarea decât în ​​1931 și apoi numai în poloneză ^[2] . Prin urmare, graficul poartă acum numele lui Henry Gantt (1861-1919), care l-a proiectat în jurul anilor 1910-1915 și l-a popularizat în Occident ^[3] .

Adoptând conceptul la calcul, prima bară de progres grafic a apărut în teza de doctorat din 1979 a lui Mitchell Model, Monitoring System Behavior in a Complex Computational Environment ^[4] . În 1985, Brad Myers a prezentat o lucrare despre „indicatorii de progres procentuali” la o conferință despre interacțiunile om-computer ^[5] .

Proiecta

Un simplu exemplu animat al unei bare de progres

De obicei este desenată ca o zonă dreptunghiulară lungă și îngustă care „se umple” de la stânga la dreapta pe măsură ce sarcina este finalizată. Umplerea zonei dreptunghiulare este de obicei fie o altă bară dreptunghiulară continuă internă, fie o serie de blocuri mici separate una de alta. De multe ori partea grafică a componentei este însoțită de o reprezentare textuală în format procentual al informației.

Cod web

Iată un exemplu de bară de progres HTML-CSS:

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

 corp {
  justify-content : centru ;
  align-items : centru ;
  fundal : # 000 ;
  display : flex ;
  umplutură : 0 ;
  marja : 0 ;
}

. progres {
  fundal : roșu ;
  justify-content : flex-start ;
  raza chenarului : 80 px ;
  align-items : centru ;
  poziție : relativă ;
  umplutură : 0 5 px ;
  display : flex ;
  înălțime : 40 px ;
  lățime : 500 px ;
}

. valoare-progres {
  animație : încărcați 3 s înainte normal ;
  box-shadow : 0 10 px 40 px -10 px #fff ;
  raza chenarului : 80 px ;
  fundal : #fff ;
  înălțime : 30 px ;
  lățime : 0 ;
}

se încarcă @ cadre cheie {
  0 % { width : 0 ; }
  100 % { lățime : 58 % ; }
}

Rezultat

Pentru a crește accesibilitatea barei de progres puteți utiliza etichete aparținând regulilor 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" >
  Pasul 2
</ div >

Bara de progres nedeterminată

Dacă nu doriți să indicați progresul unui proces ci, în general, doar „ocupația” sistemului, vorbim despre „bara de progres nedeterminată”, utilizată în principal atunci când dimensiunea sau durata procesului nu pot fi determinate a priori. Aceste „bare” utilizează o animație generică de obicei pentru a indica progresul ^[6] .

Aplicații

Utilizarea lor este foarte potrivită pentru aplicații web , deoarece este adesea necesară efectuarea mai multor operațiuni ale aceluiași proces pentru a obține valori procentuale realiste ale procesului.

În Windows Vista , de exemplu, „bare” au fost înlocuite cu o linie solidă colorată ^[7] : bara de progres pe care probabil o observăm cel mai des este cea pe care o găsim în orice browser pentru a verifica încărcarea unei pagini web ^{[8] ]} .

Exemple

• 

  Exemplu de bară de progres creativă cu o imagine în locul zonei de încărcare care are de obicei o culoare

• 

  Bara de progres care indică pașii dintr-un formular de înregistrare

• 

  Bare circulare de progres

Notă

Alte proiecte

• Wikimedia Commons conține imagini sau alte fișiere despre bara de progres

Portal IT : accesați intrările Wikipedia care se ocupă cu IT