<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 einen Indikator an, der den Fortschritt einer Aufgabe anzeigt, typischerweise als Fortschrittsbalken dargestellt.

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 enthält die globalen Attribute.

max

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

value

Dieses Attribut gibt an, wie viel der Aufgabe bereits abgeschlossen ist. Es muss eine gültige Fließkommazahl zwischen 0 und max oder zwischen 0 und 1 sein, wenn max weggelassen wird. Wenn kein value-Attribut vorhanden ist, ist der Fortschrittsbalken unbestimmt; dies deutet darauf hin, dass eine Aktivität im Gange ist, ohne Angabe, 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-Pseudoklasse kann verwendet werden, um nach unbestimmten Fortschrittsbalken zu suchen. Um den Fortschrittsbalken nach der Vergabe eines Wertes in einen unbestimmten Zustand zu versetzen, müssen Sie das Wertattribut 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 Standard-ARIA-Beschriftungsattribute aria-labelledby oder aria-label verwenden können, wie bei jedem Element mit role="progressbar", können Sie beim Verwenden von <progress> alternativ das <label>-Element verwenden.

Hinweis: Text, der zwischen die Tags des Elements gesetzt wird, ist keine zugängliche Beschriftung, sondern wird nur als Fallback für ältere 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" für den Abschnitt, der aktualisiert wird, und entfernen Sie das aria-busy-Attribut, wenn der Ladevorgang 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, Phraseninhalte, beschriftbare Inhalte, greifbare Inhalte.
Erlaubter Inhalt Phraseninhalt, es darf jedoch kein <progress>-Element unter den Nachkommen vorhanden sein.
Tag-Auslassung Keine, sowohl das öffnende als auch das schließende Tag sind obligatorisch.
Erlaubte Eltern Jedes Element, das Phraseninhalt 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