<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.
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. Dasmax-Attribut muss, wenn vorhanden, einen Wert größer als0und eine gültige Fließkommazahl haben. Der Standardwert ist1. value-
Dieses Attribut gibt an, wie viel von der Aufgabe bereits abgeschlossen ist. Es muss eine gültige Fließkommazahl zwischen
0undmaxsein oder zwischen0und1, wennmaxweggelassen wird. Wenn keinvalue-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
<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
<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
<progress value="70" max="100">70 %</progress>
Ergebnis
Technische Zusammenfassung
| Inhaltskategorien | Flussinhalt, Phrasierungselemente, beschriftbares Element, fühlbarer Inhalt. |
|---|---|
| Erlaubter Inhalt |
Phrasierungselemente, aber es darf kein <progress>-Element unter seinen Nachkommen geben.
|
| Tag-Auslassung | Keine, sowohl das Start- als auch das End-Tag sind zwingend erforderlich. |
| Erlaubte Eltern | Jedes Element, das Phrasierungselemente akzeptiert. |
| Implizite ARIA-Rolle | progressbar |
| Erlaubte ARIA-Rollen | Keine role erlaubt |
| DOM-Schnittstelle | [`HTMLProgressElement`](/de/docs/Web/API/HTMLProgressElement) |
Spezifikationen
| Spezifikation |
|---|
| HTML # the-progress-element |