HTML
Fortschrittselement
Suche…
Parameter
| Parameter | Wert |
|---|---|
| max | Wie viel Arbeit die Aufgabe insgesamt erfordert |
| Wert | Wie viel der Arbeit wurde bereits geleistet |
| Position | Dieses Attribut gibt die aktuelle Position des <progress> -Elements zurück |
| Etiketten | Dieses Attribut gibt eine Liste der <progress> -Elementbeschriftungen zurück (falls vorhanden). |
Bemerkungen
Das <progress> -Element wird in Versionen von Internet Explorer unter 10 nicht unterstützt
Das <progress> -Element ist das falsche Element, das für etwas verwendet wird, das nur ein Messgerät ist, und nicht für den Taskfortschritt. Das Anzeigen der Verwendung von Speicherplatz mithilfe des Elements <progress> ist beispielsweise nicht geeignet. Stattdessen ist das Element <meter> für diese Art von Anwendungsfällen verfügbar.
Fortschritt
Das <progress> -Element ist neu in HTML5 und wird verwendet, um den Fortschritt einer Aufgabe darzustellen
<progress value="22" max="100"></progress>
Dadurch wird ein Balken mit 22% gefüllt.
Ändern der Farbe einer Fortschrittsleiste
Fortschrittsbalken können mit der progress[value] .
Dieses Beispiel gibt einem Fortschrittsbalken eine Breite von 250px und eine Höhe von 20px
progress[value] {
width: 250px;
height: 20px;
}
Fortschrittsbalken können besonders schwierig zu gestalten sein.
Chrome / Safari / Opera
Diese Browser verwenden den Selektor -webkit-appearance , um das Fortschritts-Tag zu -webkit-appearance . Um dies zu überschreiben, können wir das Erscheinungsbild zurücksetzen.
progress[value] {
-webkit-appearance: none;
appearance: none;
}
Nun können wir den Container selbst gestalten
progress[value]::-webkit-progress-bar {
background-color: "green";
}
Feuerfuchs
Firefox formatiert den Fortschrittsbalken etwas anders. Wir müssen diese Stile verwenden
progress[value] {
-moz-appearance: none;
appearance: none;
border: none; /* Firefox also renders a border */
}
Internet Explorer
Internet Explorer 10+ unterstützt das progress . Die background-color Eigenschaft wird jedoch nicht unterstützt. Sie müssen stattdessen die color-Eigenschaft verwenden.
progress[value] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: none; /* Remove border from Firefox */
width: 250px;
height: 20px;
color: blue;
}
HTML-Fallback
Für Browser, die das progress nicht unterstützen, können Sie dies als Problemumgehung verwenden.
<progress max="100" value="20">
<div class="progress-bar">
<span style="width: 20%;">Progress: 20%</span>
</div>
</progress>
Browser, die das Progress-Tag unterstützen, ignorieren das verschachtelte Div. Ältere Browser, die das Fortschritts-Tag nicht identifizieren können, rendern stattdessen das div.