W3.CSS- Fortschrittsbalken
Ein Fortschrittsbalken kann verwendet werden, um anzuzeigen, wie weit ein Benutzer in einem Prozess ist:
Grundlegender Fortschrittsbalken
Für einen Fortschrittsbalken kann ein normales <div>-Element verwendet werden.
Die CSS-Eigenschaft width kann verwendet werden, um die Höhe und Breite eines Fortschrittsbalkens festzulegen.
Beispiel
<div class="w3-border">
<div class="w3-grey" style="height:24px;width:20%"></div>
</div>
Breite des Fortschrittsbalkens
Ändern Sie die Breite eines Fortschrittsbalkens mit der CSS- Eigenschaft width (von 0 bis 100 %):
Beispiel
<div class="w3-light-grey">
<div class="w3-grey" style="height:24px;width:50%"></div>
</div>
Farben der Fortschrittsleiste
Verwenden Sie die Klassen w3 -color , um die Farbe eines Fortschrittsbalkens zu ändern:
Beispiel
<div class="w3-light-grey">
<div class="w3-blue" style="width:75%"></div>
</div>
Fortschrittsbalken-Etiketten
Fügen Sie Text in einem w3-Container- Element hinzu, um dem Fortschrittsbalken eine Beschriftung hinzuzufügen.
Verwenden Sie die Klasse w3-center , um die Beschriftung zu zentrieren. Wenn es weggelassen wird, wird es linksbündig ausgerichtet.
Beispiel
<div class="w3-light-grey">
<div
class="w3-container w3-green w3-center" style="width:25%">25%</div>
</div>
Textgröße der Fortschrittsleiste
Verwenden Sie die Klassen w3- size , um die Textgröße im Container zu ändern:
Beispiel
<div class="w3-light-grey w3-xlarge">
<div class="w3-container w3-green" style="width:50%">50%</div>
</div>
Polsterung des Fortschrittsbalkens
Verwenden Sie die Klassen w3-padding , um dem Container Padding hinzuzufügen.
Beispiel
<div class="w3-light-grey">
<div
class="w3-container w3-red w3-padding w3-center" style="width:25%">25%</div>
</div>
</div>
Abgerundete Fortschrittsbalken
Verwenden Sie die w3-Round- Klassen, um einem Fortschrittsbalken abgerundete Ecken hinzuzufügen:
Beispiel
<div class="w3-light-grey w3-round">
<div
class="w3-container w3-round w3-blue" style="width:25%">25%</div>
</div>
Dynamischer Fortschrittsbalken
Verwenden Sie JavaScript, um einen dynamischen Fortschrittsbalken zu erstellen:
Beispiel
<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>
Dynamischer Fortschrittsbalken mit Labels
Zentriertes Etikett:
Beispiel
Linksbündige Beschriftung:
Beispiel
Beschriftung außerhalb des Fortschrittsbalkens:
Beispiel
20%
Ein weiteres Beispiel (fortgeschritten):
Beispiel
Added 0 of 10 photos