HTML таг progress
Пример
Кратък пример как се използва тагът <progress>.
<label for="file-progress">Качване на файл: </label>
<progress id="file-progress" value="35" max="100">35%</progress>Дефиниция и употреба
Елементът <progress> представлява индикатор за напредък при изпълнение на задача, например зареждане на файл, обработка на данни или завършване на стъпки в процес. Той визуално показва каква част от задачата е завършена.
Най-често се използва с два основни атрибута:
value– текущият напредък (число);max– максималната стойност (число), която представлява 100% завършеност.
Когато и двата атрибута са зададени, браузърът изчислява процента като value / max и визуализира съответната част от лентата. Ако атрибутът value липсва, <progress> показва неопределен (indeterminate) напредък – обикновено анимирана лента, която показва, че процесът тече, но без конкретен процент.
Елементът може да съдържа текст между отварящия и затварящия таг (например „70%“), който служи като резервно съдържание за по-стари браузъри или помощни технологии. Обикновено се комбинира с <label>, за да се опише какво точно измерва индикаторът за напредък.
Browser Support
| Browser | Поддръжка |
|---|---|
 Chrome |
✔️ |
 Firefox |
✔️ |
 Edge |
✔️ |
 Safari |
✔️ |
 Opera |
✔️ |
Атрибути
| Атрибут | Описание |
|---|---|
value |
Текущата стойност на напредъка. Трябва да е число между 0 и стойността на max. Ако липсва, индикаторът е в неопределено състояние. |
max |
Максималната стойност на напредъка. По подразбиране е 1, ако не е зададена. Използва се за изчисляване на процента. |