<progress> w HTML to wbudowany element, który służy do graficznego przedstawiania postępu wykonywania jakiegoś zadania, np. pobierania pliku, wypełniania ankiety czy realizacji jakiejkolwiek operacji wymagającej czasu. Jest częścią standardu HTML5, a jego wygląd jest domyślnie renderowany przez przeglądarkę jako pasek postępu.
Kluczowe właściwości <progress> –
- Pokazuje użytkownikowi, jaki procent zadania został ukończony, a ile jeszcze pozostało,
- Zazwyczaj wyświetla się jako poziomy pasek, wypełniający się od lewej do prawej strony wraz ze wzrostem wartości postępu,
- Element ten jest semantyczny — informuje zarówno użytkowników, jak i technologie asystujące (np. czytniki ekranu) o tym, że trwa realizacja operacji wymagającej czasu.
Składnia i atrybuty
<progress value="aktualny_postęp" max="maksymalna_wartość">Tekst alternatywny</progress>- Value – bieżąca wartość postępu (liczba);
- Max – maksymalna wartość, która odpowiada 100% (liczba). Domyślnie wynosi
1; - Tekst alternatywny wpisany pomiędzy otwarciem i zamknięciem tagu
<progress>jest wyświetlany, gdy przeglądarka nie obsługuje tego elementu lub dla czytników ekranu.
Przykład
<label for="upload">Przesyłanie pliku:</label> <progress id="upload" value="45" max="100">45%</progress> Ten kod wyświetli pasek postępu wskazujący, że operacja została ukończona w 45%.
Tryb indeterminate (nieokreślony)
Jeśli nie podasz atrybutu value, pasek postępu staje się tzw. indeterminate (nieokreślony) – oznacza to, że proces trwa, ale nie wiadomo, ile czasu zajmie jego zakończenie. W takim przypadku przeglądarka zazwyczaj animuje pasek, sygnalizując użytkownikowi, że operacja jest w toku.
Przykład użycia
<label for="waiting">Czekaj na zakończenie operacji:</label> <progress id="waiting"></progress>Integracja z JavaScriptem
Aby dynamicznie aktualizować wartość paska postępu (np. podczas pobierania dużego pliku), wartości value można zmieniać za pomocą JavaScript.
<label for="prog">Postęp:</label> <progress id="prog" value="0" max="100"></progress> <script> let progress = document.getElementById('prog'); let count = 0; let interval = setInterval(() => { count += 10; progress.value = count; if (count >= 100) clearInterval(interval); }, 500); </script> W tym przykładzie pasek postępu zwiększa swoją wartość co pół sekundy.
Dostępność
Zaleca się użycie <label> powiązanego z <progress>, by osoby korzystające z technologii asystujących miały czytelny opis tego, czego dotyczy dany pasek postępu.
Częste zastosowania <progress>
- Przesyłanie lub pobieranie plików – pokazanie użytkownikowi, jaki procent danych został już przesłany;
- Wielostronicowe formularze – informowanie o poziomie ukończenia wypełniania całego formularza;
- Procesy instalacji lub aktualizacji – wizualizacja trwających aktualizacji, instalacji czy ładowania danych;
- Zadania asynchroniczne – każdy proces, który może zająć więcej niż chwilę i wymaga informowania użytkownika o stanie zaawansowania.
Różnica między <progress> a <meter>
<progress>przeznaczony jest do wyświetlania postępu wykonywania operacji (np. „skończono 40% pobierania pliku”);<meter>używa się do wyrażania wartości w skali (np. poziomu naładowania baterii, „moc sygnału”; wartość może się wahać w obie strony, nie jest ukierunkowana tylko na osiągnięcie celu).
Dostosowanie wyglądu
Wygląd <progress> można stylizować za pomocą CSS. Przeglądarki dostarczają własne style domyślne, jednak niektóre pozwalają na częściowe dostosowanie poprzez pseudo-elementy takie jak ::-webkit-progress-bar czy ::-webkit-progress-value (przeglądarki oparte na Webkicie i Blink).
progress { width: 300px; height: 25px; } progress::-webkit-progress-bar { background-color: #eee; } progress::-webkit-progress-value { background-color: #76c7c0; }
Element <progress> jest więc uniwersalnym, semantycznym i zapewniającym dostępność narzędziem do wizualizacji postępu realizacji zadań na stronach internetowych, z możliwością łatwej integracji ze skryptami oraz personalizacji wyglądu.
