HTML progress: Fortschritt anzeigen und auf unbestimmt umschalten
HTML <progress> zeigt den Abschluss einer Aufgabe an. Setzen Sie value und max für bestimmten Fortschritt oder lassen Sie das Attribut value weg, wenn die Gesamtmenge unbekannt ist. Das Element misst Uploads oder Downloads nicht automatisch.
Berechnen Sie den Fortschritt mit Wert und Maximalwert
value ist die abgeschlossene Menge und max ist die Gesamtmenge. Ein Wert von 20 bei max 100 bedeutet 20 %; bei max 200 bedeutet es 10 %. Wenn max weggelassen wird, ist der Standardwert 1, sodass 20 % als value="0.2" geschrieben werden. Verwenden Sie eine gültige Zahl größer als null für max und einen Wert zwischen null und max.
Das Minimum ist immer null; Fortschritt verwendet kein min-Attribut. Betrachten Sie meter für eine Messung innerhalb eines Bereichs, wie z. B. Speichernutzung oder eine Punktzahl. Verwenden Sie progress für den Abschluss einer laufenden Aufgabe.
Vollständiges Beispiel: Fortschritt aktualisieren und auf unbestimmt umschalten
Speichern Sie diesen Code als progress-demo.html und öffnen Sie ihn in einem Browser. Die Schaltflächen ändern nur die angezeigten Werte zum Üben; sie übertragen keine Dateien.
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Fortschritt und unbestimmter Zustand</title>
<style>
body { max-width: 36rem; padding: 0 1rem; margin: 1rem auto; }
progress { display: block; width: 100%; height: 1.5rem; }
button { margin: 0.25rem; font: inherit; }
</style>
</head>
<body>
<h1>Fortschritt üben</h1>
<label for="work">Fortschritt der Beispielaufgabe</label>
<progress id="work" value="20" max="100">20%</progress>
<p id="status" aria-live="polite">20% abgeschlossen</p>
<button type="button" id="advance">Auf 80% ändern</button>
<button type="button" id="unknown">Gesamtmenge unbekannt</button>
<button type="button" id="reset">Zurücksetzen</button>
<script>
const bar = document.getElementById('work');
const status = document.getElementById('status');
function show(value) {
if (value === null) {
bar.removeAttribute('value');
bar.textContent = 'In Bearbeitung';
status.textContent = 'In Bearbeitung: Die Gesamtmenge der Arbeit ist unbekannt.';
} else {
bar.value = value;
bar.textContent = value + '%';
status.textContent = value + '% abgeschlossen';
}
}
document.getElementById('advance').addEventListener('click', () => show(80));
document.getElementById('unknown').addEventListener('click', () => show(null));
document.getElementById('reset').addEventListener('click', () => show(20));
</script>
</body>
</html>- Der Anfangszustand ist zu 20 % abgeschlossen. Klicken Sie auf
Auf 80% ändern, um sowohl die Leiste als auch ihre Beschreibung auf 80 % zu ändern. - Klicken Sie auf
Gesamtmenge unbekannt, um das Attribut value zu entfernen. Der Browser zeigt einen unbestimmten Fortschritt zusammen mit einem Satz an, der erklärt, dass das Gesamte unbekannt ist. - Klicken Sie auf
Zurücksetzen, um das Attribut value wiederherzustellen und auf 20 % zurückzukehren.
value="0" ist ein bestimmter Fortschritt ohne abgeschlossene Arbeit; er ist nicht unbestimmt. Um ein bestehendes Fortschrittselement auf unbestimmt zu schalten, entfernen Sie das Attribut, wie es das Beispiel zeigt. Das Aussehen und die Animation von unbestimmtem Fortschritt können je nach Browser, Betriebssystem und Benutzereinstellungen variieren.
Geben Sie einen Aufgabennamen und einen Statussatz an
Der Text „20%“ innerhalb des Fortschritts ist ein Fallback-Text für ältere Browser und kein Ersatz für den Namen der Aufgabe. Verknüpfen Sie ein Label, indem Sie übereinstimmende for- und id-Werte verwenden, oder geben Sie einen geeigneten über ARIA zugänglichen Namen an, um die Aufgabe zu identifizieren. Zeigen Sie den aktuellen Zustand sowohl in Worten als auch durch Farbe und Balkenlänge an.
Bei echten Aufgaben aktualisieren Sie den Wert anhand von Informationen, die von einem Server bereitgestellt werden, oder von Übertragungsereignissen. Das Auffüllen eines Balkens mit einem Timer bedeutet nicht, dass die Arbeit abgeschlossen ist. Entwerfen Sie separate Nachrichten und Aktionen für Fehler, Abbruch und Abschluss und steuern Sie die Häufigkeit der Ansagen, damit Statusaktualisierungen nicht übermäßig wiederholt werden. Die MDN-Fortschrittsreferenz erklärt die Syntax und die Anforderungen an die Barrierefreiheit.
