<progress>: Das Fortschrittsanzeigeelement

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Das <progress> HTML-Element zeigt einen Anzeiger, der den Fortschritt einer Aufgabe darstellt, typischerweise als Fortschrittsbalken angezeigt.

Probieren Sie es aus

<label for="file">File progress:</label>

<progress id="file" max="100" value="70">70%</progress>

label {
  padding-right: 10px;
  font-size: 1rem;
}

Attribute

Dieses Element umfasst die globalen Attribute.

max

Dieses Attribut beschreibt, wie viel Arbeit die durch das progress-Element angezeigte Aufgabe erfordert. Das max-Attribut muss, falls vorhanden, einen Wert größer als 0 und eine gültige Gleitkommazahl haben. Der Standardwert ist 1.

value

Dieses Attribut gibt an, wie viel von der Aufgabe bereits abgeschlossen wurde. Es muss eine gültige Gleitkommazahl zwischen 0 und max oder zwischen 0 und 1 sein, wenn max weggelassen wird. Wenn kein value-Attribut vorhanden ist, ist die Fortschrittsanzeige unbestimmt; dies zeigt an, dass eine Aktivität im Gange ist, ohne Anhaltspunkt, wie lange sie voraussichtlich dauern wird.

Hinweis: Im Gegensatz zum <meter>-Element ist der Mindestwert immer 0, und das min-Attribut ist für das <progress>-Element nicht zulässig.

Hinweis: Die :indeterminate Pseudo-Klasse kann verwendet werden, um auf unbestimmte Fortschrittsbalken zuzugreifen. Um den Fortschrittsbalken nach der Wertzuteilung auf unbestimmt zu setzen, müssen Sie das Werteattribut mit element.removeAttribute('value') entfernen.

Barrierefreiheit

Beschriftung

In den meisten Fällen sollten Sie eine zugängliche Beschriftung bereitstellen, wenn Sie <progress> verwenden. Während Sie die standardmäßigen ARIA-Beschriftungsattribute aria-labelledby oder aria-label wie für jedes Element mit role="progressbar" verwenden können, können Sie alternativ beim Gebrauch von <progress> das <label>-Element nutzen.

Hinweis: Text, der zwischen den Tags des Elements platziert wird, ist keine zugängliche Beschriftung; es wird nur als Fallback für alte Browser, die dieses Element nicht unterstützen, empfohlen.

Beispiele

html
<label>
  Uploading Document: <progress value="70" max="100">70 %</progress>
</label>

<!-- OR -->
<br />

<label for="progress-bar">Uploading Document</label>
<progress id="progress-bar" value="70" max="100">70 %</progress>

Ergebnis

Beschreibung eines bestimmten Bereichs

Wenn das <progress>-Element den Ladefortschritt eines Abschnitts einer Seite beschreibt, verwenden Sie aria-describedby, um auf den Status zu verweisen, und setzen Sie aria-busy="true" auf den Abschnitt, der aktualisiert wird, wobei das aria-busy-Attribut entfernt wird, wenn das Laden abgeschlossen ist.

Beispiele

html
<div aria-busy="true" aria-describedby="progress-bar">
  <!-- content is for this region is loading -->
</div>

<!-- ... -->

<progress id="progress-bar" aria-label="Content loading…"></progress>
Ergebnis

Beispiele

html
<progress value="70" max="100">70 %</progress>

Ergebnis

Technische Zusammenfassung

Inhaltskategorien Fließinhalt, Phrasinhalte, labelbare Inhalte, greifbare Inhalte.
Erlaubter Inhalt Phrasinhalte, aber es darf kein <progress>-Element unter seinen Nachkommen geben.
Tag-Auslassung Keine, sowohl das Start- als auch das End-Tag sind obligatorisch.
Erlaubte Eltern Jedes Element, das Phrasinhalte akzeptiert.
Implizite ARIA-Rolle progressbar
Erlaubte ARIA-Rollen Keine role erlaubt
DOM-Schnittstelle [`HTMLProgressElement`](/de/docs/Web/API/HTMLProgressElement)

Spezifikationen

Specification
HTML
# the-progress-element

Browser-Kompatibilität

Siehe auch