<progress>
Pasek postępu zadania: wysyłania pliku, instalacji albo ukończenia kursu.
- Wyświetlanie
- inline-block
- Znacznik zamykający
- Wymagany
- Dozwolona zawartość
- Treść frazowa bez innych elementów
<progress>
Przykład
#<p><label for="course-progress">Kurs HTML: 18 z 24 lekcji</label></p>
<progress id="course-progress" value="18" max="24">75%</progress>Definicja i zastosowanie
#Element <progress> pokazuje, jak daleko zaszło jakieś zadanie. Atrybut max określa całość (domyślnie 1), a value bieżący postęp, więc <progress value="7" max="10"> wyświetli pasek wypełniony w 70%.
Bez atrybutu value pasek jest nieokreślony: przeglądarka zwykle pokazuje animację oczekiwania, która mówi „coś się dzieje, ale nie wiadomo, ile to potrwa”. To dobry stan na czas łączenia się z serwerem, zanim poznasz rozmiar pliku.
<progress> służy do postępu w czasie. Do pomiaru wartości w zakresie, takiej jak zajęte miejsce na dysku czy siła hasła, użyj <meter>. Pasek potrzebuje też etykiety, najlepiej przez <label> albo aria-label, żeby czytnik ekranu wiedział, czego dotyczy postęp.
Składnia
#<progress value="30" max="100">30%</progress>Atrybuty
#liczba od 0 do wartości `max`
Bieżący postęp. Bez tego atrybutu pasek staje się nieokreślony i pokazuje animację oczekiwania, jak w drugim wierszu przykładu.liczba dodatnia (domyślnie 1)
Wartość oznaczająca ukończenie całego zadania. Możesz podać liczbę lekcji, megabajtów czy kroków, zamiast przeliczać wszystko na procenty.
Element obsługuje też wszystkie atrybuty globalne, takie jak class, id, style czy hidden.
Atrybuty w praktyce
#value
liczba od 0 do wartości `max`Bieżący postęp. Bez tego atrybutu pasek staje się nieokreślony i pokazuje animację oczekiwania, jak w drugim wierszu przykładu.
<p>Wysyłanie pliku: <progress value="0.4" aria-label="Wysyłanie pliku">40%</progress></p>
<p>Łączenie z serwerem: <progress aria-label="Łączenie z serwerem"></progress></p>max
liczba dodatnia (domyślnie 1)Wartość oznaczająca ukończenie całego zadania. Możesz podać liczbę lekcji, megabajtów czy kroków, zamiast przeliczać wszystko na procenty.
<p>Krok 2 z 5 <progress value="2" max="5" aria-label="Postęp rejestracji"></progress></p>Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Tekst między znacznikami, na przykład „75%”, nie jest widoczny w nowoczesnych przeglądarkach. Jeśli liczba ma być widoczna, napisz ją obok paska.
- Kolor paska zmienisz najprościej przez
accent-color, na przykładprogress { accent-color: #8b5cf6; }.
Powiązane hasła
#- <meter>Wskaźnik wartości w znanym zakresie: zajęte miejsce, wynik testu, poziom baterii.
- <output>Wynik obliczenia lub działania użytkownika, na przykład suma w kalkulatorze.
- <label>Etykieta pola formularza. Kliknięcie etykiety przenosi kursor do pola.
- <form>Formularz, który zbiera dane od użytkownika i wysyła je pod wskazany adres.
Widzisz błąd albo brakuje przykładu? Napisz do nas.