Fortschrittsbalken
Ein Fortschrittsbalken kann verwendet werden, um zu zeigen, wie weit ein Benutzer in einem Prozess ist:
Grund Progress Bar
Der w3-progress-Container - Klasse definiert einen Container für den Fortschrittsbalken und der w3-progressbar definiert den tatsächlichen Fortschrittsbalken (der "gefüllt" Bereich). Legen Sie die Breite des Fortschrittsbalkens mit der CSS-Eigenschaft width:
Beispiel
<div class="w3-progress-container">
<div class="w3-progressbar" style="width:10%"></div>
</div>Progress Bar Größen
Legen Sie die Breite / Größe des Fortschrittsbalken mit einem Prozentwert von 0 bis 100%:
Beispiel
<div class="w3-progress-container">
<div class="w3-progressbar" style="width:50%"></div>
</div>Progress Bar Farben
Standardmäßig ist die Farbe des w3-progress-Behälter hellgrau und die w3-progressbar ist grau:
Ändern Sie ihre Farbe mit einer der W3.CSS Farbklassen:
Beispiel
<div class="w3-progress-container
w3-light-blue">
<div class="w3-progressbar
w3-blue" style="width:75%"></div>
</div>Abgerundete Fortschrittsbalken
Verwenden Sie eine der w3-Runde Klassen abgerundeten Ecken auf Ihre Fortschrittsbalken hinzuzufügen:
Beispiel
<div class="w3-progress-container w3-round">
<div
class="w3-progressbar w3-round" style="width:25%"></div>
</div>Progress Bar Labels
Fügen Sie ein neues Element in der "w3-progressbar", um ein Etikett auf die Statusleiste hinzuzufügen.
Tipp: Verwenden Sie die w3-Center - Klasse immer das Etikett halten zentriert. Wenn nicht vorhanden, wird es ausgerichtet bleiben.
Beispiel
<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>Dynamische Progress Bar
Verwenden Sie JavaScript, um eine dynamische Fortschrittsbalken zu erstellen:
Beispiel
<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>Dynamische Progress Bar mit Labels
Centered-Label:
Linksbündig Label:
Beschriften außerhalb der Fortschrittsbalken: