<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 ⁨Juli 2015⁩.

Das <progress> HTML-Element zeigt einen Indikator, 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 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 der Aufgabe bereits abgeschlossen wurde. Es muss eine gültige Gleitkommazahl 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 dass eine Angabe gemacht wird, wie lange sie voraussichtlich dauern wird.

Hinweis: Im Gegensatz zum <meter>-Element ist der Minimalwert 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 prüfen. Um den Fortschrittsbalken auf unbestimmt zu ändern, nachdem ihm ein Wert zugewiesen wurde, 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 standardmäßigen ARIA-Beschriftungsattribute aria-labelledby oder aria-label wie bei jedem Element mit role="progressbar" verwenden können, können Sie beim Verwenden von <progress> alternativ 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	Flow-Inhalt, Phraseninhalt, labelbarer Inhalt, fühlbarer Inhalt.
Erlaubter Inhalt	Phraseninhalt, aber es darf kein `<progress>`-Element unter seinen Nachkommen geben.
Tag-Auslassung	Keine, sowohl das Start- als auch das End-Tag sind erforderlich.
Erlaubte Eltern	Jedes Element, das Phraseninhalt akzeptiert.
Implizierte 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

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden