<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 Indikator für den Abschlussfortschritt einer Aufgabe an, typischerweise dargestellt als Fortschrittsbalken.

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 haben und eine gültige Gleitkommazahl sein. 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. Ist kein value-Attribut vorhanden, ist die Fortschrittsanzeige unbestimmt; dies zeigt an, 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 erlaubt.

Hinweis: Die :indeterminate-Pseudoklasse kann verwendet werden, um unbestimmte Fortschrittsbalken zu erkennen. Um den Fortschrittsbalken nach einer Wertzuweisung wieder unbestimmt zu machen, muss das value-Attribut mit element.removeAttribute('value') entfernt werden.

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 verwenden können, wie bei jedem Element mit role="progressbar", können Sie alternativ beim Verwenden von <progress> das <label>-Element verwenden.

Hinweis: Text, der zwischen den Tags des Elements platziert wird, ist keine zugängliche Beschriftung. Er wird nur 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 den Abschnitt, der aktualisiert wird. Entfernen Sie das aria-busy-Attribut, 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, formulierender Inhalt, beschriftbarer Inhalt, fühlbarer Inhalt.
Erlaubter Inhalt Formulierender Inhalt, aber es darf kein <progress>-Element unter seinen Nachkommen enthalten sein.
Tag-Außlassung Keine, sowohl das Start- als auch das End-Tag sind obligatorisch.
Erlaubte Eltern Jedes Element, das formulierenden Inhalt 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