Paski postępu
Pasek postępu może być używany, aby pokazać, jak daleko wzdłuż użytkownik jest w procesie:
Podstawowe Progress Bar
Klasa w3-Progress-pojemnik definiuje pojemnik na pasku postępu, a w3-progressbar określa rzeczywisty pasek postępu (zwanego dalej "wypełnione" strefy). Ustaw szerokość paska postępu z właściwością szerokość CSS:
Przykład
<div class="w3-progress-container">
<div class="w3-progressbar" style="width:10%"></div>
</div>Pasek postępu Rozmiary
Ustaw szerokość / rozmiar paska postępu z wartością procentową od 0 do 100%:
Przykład
<div class="w3-progress-container">
<div class="w3-progressbar" style="width:50%"></div>
</div>Pasek postępu Kolory
Domyślnie kolor w3-Progress-kontenera jest jasnoszary i w3-progressbar jest szary:
Zmienić ich kolor z żadną z grup kolorystycznych W3.CSS:
Przykład
<div class="w3-progress-container
w3-light-blue">
<div class="w3-progressbar
w3-blue" style="width:75%"></div>
</div>Zaokrąglone paski postępu
Użyj dowolnej klasy w3 rundy dodać zaokrąglone narożniki do swoich paski postępu:
Przykład
<div class="w3-progress-container w3-round">
<div
class="w3-progressbar w3-round" style="width:25%"></div>
</div>Pasek postępu Etykiety
Dodaj nowy element wewnątrz "w3-ProgressBar", aby dodać etykietę na pasku postępu.
Wskazówka: Użyj klasy W3-center, aby zawsze zachować etykietę centralnie. Jeżeli zostanie pominięty, to będą wyrównane do lewej.
Przykład
<div class="w3-progress-container">
<div id="myBar"
class="w3-progressbar w3-green" style="width:25%">
<div class="w3-center w3-text-white">25%</div>
</div>
</div>Dynamiczny pasek postępu
Użyj JavaScript, aby stworzyć dynamiczny pasek postępu:
Przykład
<div class="w3-progress-container">
<div id="myBar"
class="w3-progressbar w3-green" style="width:1%"></div>
</div>
<button class="w3-btn" 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
Centered label:
Wyrównany do lewej etykietę:
Etykieta poza pasek postępu: