Elementul <progress> reprezintă stadiul de finalizare al unei sarcini aflate în derulare. Este utilizat pentru bare de descărcare sau încărcare a fișierelor, finalizarea pașilor dintr-un proces de checkout sau stadiul instalării unei actualizări.
Stare determinată (cu procentaj) vs. Stare nedeterminată (loading continuu)
<!-- 1. Progres determinat: știm exact cât s-a descărcat -->
<label for="progres-upload">Încărcare imagine de profil (70%):</label>
<progress id="progres-upload" value="70" max="100">70%</progress>
<!-- 2. Progres nedeterminat: când atributul value lipsește, browserul afișează o animație continuă -->
<label for="procesare-date">Se procesează comanda pe server...</label>
<progress id="procesare-date"></progress>Diferența cheie: <progress> vs. <meter>
| Caracteristică | <progress> | <meter> |
|---|---|---|
| Ce măsoară | Stadiul de finalizare al unei activități în desfășurare. | O valoare fixă statică dintr-un interval (baterie, presiune, spațiu). |
| Valoare minimă | Este întotdeauna fixată la 0. | Poate avea orice minim definit prin atributul min (inclusiv negativ). |
| Stare nedeterminată | Da (când omitem atributul value, devine spinner animat). |
Nu este permisă (necesită întotdeauna o valoare). |