<progress> HTML-Fortschrittsanzeige-Element

Baseline Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.

Das <progress> HTML-Element zeigt einen Indikator an, der den Fortschritt einer Aufgabe darstellt. Üblicherweise wird dies als Fortschrittsbalken angezeigt.

In diesem Artikel

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 mit dem progress-Element angezeigte Aufgabe erfordert. Das max-Attribut muss, wenn vorhanden, 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 ist. 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 anzugeben, wie lange sie voraussichtlich dauern wird.

Hinweis: Im Unterschied 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 unbestimmte Fortschrittsbalken zu selektieren. Um den Fortschrittsbalken nach der Festlegung eines Wertes wieder auf unbestimmt zu setzen, müssen Sie das value-Attribut 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 wie bei jedem Element mit role="progressbar" verwenden können, können Sie bei der Verwendung von <progress> alternativ das <label>-Element nutzen.

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

Phrasierungselemente, aber es darf kein <progress>-Element unter seinen Nachkommen geben.

Keine, sowohl das Start- als auch das End-Tag sind zwingend erforderlich.

Jedes Element, das Phrasierungselemente akzeptiert.

progressbar

Keine role erlaubt

[`HTMLProgressElement`](/de/docs/Web/API/HTMLProgressElement)

Help improve MDN

War diese Übersetzung hilfreich?

Ja Nein

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

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

<progress> HTML-Fortschrittsanzeige-Element

In diesem Artikel

Probieren Sie es aus

Attribute

Barrierefreiheit

Beschriftung

Beispiele

Ergebnis

Beschreibung eines bestimmten Bereichs

Beispiele

Beispiele

Ergebnis

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

Help improve MDN