HTML
Element postępu
Szukaj…
Parametry
| Parametr | Wartość |
|---|---|
| max | Ile pracy w sumie wymaga to zadanie |
| wartość | Ile pracy zostało już wykonanych |
| pozycja | Ten atrybut zwraca bieżącą pozycję elementu <progress> |
| etykiety | Ten atrybut zwraca listę etykiet elementów <progress> (jeśli istnieją) |
Uwagi
Element <progress> nie jest obsługiwany w wersjach programu Internet Explorer mniejszych niż 10
Element <progress> jest niewłaściwy do użycia w przypadku czegoś, co jest tylko miernikiem, a nie postępem zadania. Na przykład pokazywanie wykorzystania miejsca na dysku za pomocą elementu <progress> jest nieodpowiednie. Zamiast tego element <meter> jest dostępny dla tego typu przypadków użycia.
Postęp
Element <progress> jest nowy w HTML5 i służy do reprezentowania postępu zadania
<progress value="22" max="100"></progress>
To tworzy pasek wypełniony 22%
Zmiana koloru paska postępu
Paski postępu można stylizować za pomocą selektora progress[value] .
W tym przykładzie pasek postępu ma szerokość 250px i wysokość 20 20px
progress[value] {
width: 250px;
height: 20px;
}
Paski postępu mogą być szczególnie trudne do stylizacji.
Chrome / Safari / Opera
Te przeglądarki używają selektora -webkit-appearance do -webkit-appearance znacznika postępu. Aby to zmienić, możemy zresetować wygląd.
progress[value] {
-webkit-appearance: none;
appearance: none;
}
Teraz możemy stylizować sam kontener
progress[value]::-webkit-progress-bar {
background-color: "green";
}
Firefox
Firefox stylizuje pasek postępu nieco inaczej. Musimy używać tych stylów
progress[value] {
-moz-appearance: none;
appearance: none;
border: none; /* Firefox also renders a border */
}
Internet Explorer
Internet Explorer 10+ obsługuje element progress . Nie obsługuje jednak właściwości background-color . Zamiast tego musisz użyć właściwości color.
progress[value] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: none; /* Remove border from Firefox */
width: 250px;
height: 20px;
color: blue;
}
Fallback HTML
W przypadku przeglądarek, które nie obsługują elementu progress , można użyć tego jako obejścia.
<progress max="100" value="20">
<div class="progress-bar">
<span style="width: 20%;">Progress: 20%</span>
</div>
</progress>
Przeglądarki obsługujące tag postępu zignorują zagnieżdżone wewnątrz div. Starsze przeglądarki, które nie mogą zidentyfikować znacznika postępu, wyświetlą zamiast tego div.