HTML5: Element progress - pasek postępu

Standard HTML5 wprowadza kilka elementów, bardziej związanych z aplikacjami niż z typowymi dokumentami tekstowymi. Jednym z nich jest pasek postępu, który pozwala na graficzną reprezentację postępu czasochłonnej czynności, jak ściąganie/wysyłanie plików, przetwarzanie danych przez algorytm. Umieszczenie elementu w dokumencie:

<progress max="100"></progress>

Parametry:

• max - wartość maksymalna,
• value - aktualna wartość wskazywana przez pasek,
• form - formularz do którego przypisany jest pasek.

Dostęp do paska postępu w JavaScript

<progress id="test" max="100"></progress>

Kod w JavaScript:

bar = document.getElementById("test");
bar.value = 50; // 50% postępu

W przypadku nieokreślenia parametru max pasek postępu, przyjmuje postać, w której nie wskazuje na aktualny postęp tylko pracę w toku (przesuwający się prostokąt).



Określanie wyglądu paska

Określenie tła i obramowania wygląda tak samo jak w innych elementach HTML. Problemem może być tu określenie koloru wskazującego na postęp. Nie można tego dokonać żadnym standardowym parametrem CSS.
Należy użyć pseudostyli dla konkretnej przeglądarki, w tym przypadku dla Firefoksa i Chrome:

progress::-webkit-progress-bar-value, 
progress::-webkit-progress-value,
progress::-moz-progress-bar {background-color: Red;}