W3. Paski postępu CSS
Pasek postępu może służyć do pokazania, jak daleko użytkownik jest w procesie:
Podstawowy pasek postępu
Normalny element <div> może być użyty jako pasek postępu.
Właściwość CSS width może służyć do ustawiania wysokości i szerokości paska postępu.
Przykład
<div class="w3-border">
<div class="w3-grey" style="height:24px;width:20%"></div>
</div>
Szerokość paska postępu
Zmień szerokość paska postępu za pomocą właściwości szerokości CSS (od 0 do 100%):
Przykład
<div class="w3-light-grey">
<div class="w3-grey" style="height:24px;width:50%"></div>
</div>
Kolory paska postępu
Użyj klas kolorów w3 , aby zmienić kolor paska postępu:
Przykład
<div class="w3-light-grey">
<div class="w3-blue" style="width:75%"></div>
</div>
Etykiety paska postępu
Dodaj tekst wewnątrz elementu kontenera w3 , aby dodać etykietę do paska postępu.
Użyj klasy w3-center , aby wyśrodkować etykietę. Jeśli zostanie pominięty, zostanie wyrównany do lewej.
Przykład
<div class="w3-light-grey">
<div
class="w3-container w3-green w3-center" style="width:25%">25%</div>
</div>
Rozmiar tekstu paska postępu
Użyj klas rozmiarów w3 , aby zmienić rozmiar tekstu w kontenerze:
Przykład
<div class="w3-light-grey w3-xlarge">
<div class="w3-container w3-green" style="width:50%">50%</div>
</div>
Wypełnienie paska postępu
Użyj klas w3 padding , aby dodać dopełnienie do kontenera.
Przykład
<div class="w3-light-grey">
<div
class="w3-container w3-red w3-padding w3-center" style="width:25%">25%</div>
</div>
</div>
Zaokrąglone paski postępu
Użyj klas w3 round , aby dodać zaokrąglone rogi do paska postępu:
Przykład
<div class="w3-light-grey w3-round">
<div
class="w3-container w3-round w3-blue" style="width:25%">25%</div>
</div>
Dynamiczny pasek postępu
Użyj JavaScript, aby utworzyć dynamiczny pasek postępu:
Przykład
<div class="w3-light-grey">
<div id="myBar" class="w3-container w3-green"
style="height:24px;width:1%"></div>
</div>
<button class="w3-button w3-light-grey" onclick="move()">Click Me</button>
<script>
function move() {
var elem =
document.getElementById("myBar");
var width =
1;
var id = setInterval(frame, 10);
function frame() {
if (width >= 100) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
}
}
}
</script>
Dynamiczny pasek postępu z etykietami
Wyśrodkowana etykieta:
Przykład
Etykieta wyrównana do lewej:
Przykład
Etykieta poza paskiem postępu:
Przykład
20%
Inny przykład (zaawansowany):
Przykład
Added 0 of 10 photos