<progress>: Das Fortschrittsanzeige-Element

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 ein Indikator, der den Fortschritt der Erledigung einer Aufgabe anzeigt, typischerweise in Form eines Fortschrittsbalkens.

Probieren Sie es aus

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, falls vorhanden, muss einen Wert größer als 0 und eine gültige Fließkommazahl haben. Der Standardwert ist 1.

value

Dieses Attribut gibt an, wie viel von der Aufgabe bereits abgeschlossen wurde. Es muss eine gültige Fließkommazahl zwischen 0 und max sein, oder zwischen 0 und 1, wenn max weggelassen wird. Wenn kein value-Attribut vorhanden ist, ist der Fortschrittsbalken unbestimmt; dies zeigt an, dass eine Aktivität im Gange ist, ohne Hinweis darauf, 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 erlaubt.

Hinweis: Die :indeterminate Pseudoklasse kann verwendet werden, um gegen unbestimmte Fortschrittsbalken zu übereinstimmen. Um den Fortschrittsbalken auf unbestimmt zu setzen, nachdem er einen Wert erhalten hat, müssen Sie das Value-Attribut mit element.removeAttribute('value') entfernen.

Barrierefreiheit

Kennzeichnung

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

Hinweis: Text, der zwischen den Tags des Elements platziert wird, ist kein zugängliches Label, sondern wird lediglich als Fallback für alte Browser empfohlen, die dieses Element nicht unterstützen.

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 dem Abschnitt, der aktualisiert wird, um das Attribut aria-busy zu entfernen, 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ßinhalte, Textinhalte, beschriftbare Inhalte, spürbare Inhalte.
Zulässiger Inhalt Textinhalte, aber es darf kein <progress>-Element unter seinen Nachkommen geben.
Tag-Auslassung Keine, sowohl das öffnende als auch das schließende Tag sind zwingend erforderlich.
Zulässige Eltern Jedes Element, das Textinhalte akzeptiert.
Implizierte ARIA-Rolle progressbar
Erlaubte ARIA-Rollen Keine role erlaubt
DOM-Schnittstelle [`HTMLProgressElement`](/de/docs/Web/API/HTMLProgressElement)

Spezifikationen

Specification
HTML Standard
# the-progress-element

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch