<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>-Element HTML zeigt einen Indikator an, der den Abschlussfortschritt einer Aufgabe darstellt, typischerweise 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 durch das
progress-Element angezeigte Aufgabe erfordert. Dasmax-Attribut muss, wenn vorhanden, einen Wert größer als0haben und eine gültige Gleitkommazahl sein. Der Standardwert ist1. value-
Dieses Attribut gibt an, wie viel von der Aufgabe bereits abgeschlossen wurde. Es muss eine gültige Gleitkommazahl 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 Hinweis darauf, wie lange sie voraussichtlich dauern wird.
Hinweis:
Anders als beim <meter>-Element ist der Mindestwert immer 0, und das min-Attribut ist für das <progress>-Element nicht zulässig.
Hinweis:
Die Pseudo-Klasse :indeterminate kann verwendet werden, um unbestimmte Fortschrittsbalken zu bestimmen. Um den Fortschrittsbalken nach der Vergabe eines Wertes auf unbestimmt zu ändern, 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 verwenden können, wie Sie es für jedes Element mit role="progressbar" tun würden, können Sie bei Verwendung von <progress> alternativ das <label>-Element verwenden.
Hinweis: Text, der zwischen den Element-Tags platziert wird, ist keine zugängliche Beschriftung, sondern wird nur als Rückgriff 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, und entfernen Sie das aria-busy-Attribut, wenn der Ladevorgang 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, Phrasinhalte, beschriftbare Inhalte, fühlbare Inhalte. |
|---|---|
| Zulässiger Inhalt |
Phrasinhalte, aber es darf kein <progress>-Element unter seinen Nachkommen geben.
|
| Tag-Auslassung | Keine, sowohl das Start- als auch das End-Tag sind erforderlich. |
| Zulässige Eltern | Jedes Element, das Phrasinhalte akzeptiert. |
| Implizierte ARIA-Rolle | progressbar |
| Zulässige ARIA-Rollen | Keine role zulässig |
| DOM-Schnittstelle | [`HTMLProgressElement`](/de/docs/Web/API/HTMLProgressElement) |
Spezifikationen
| Spezifikation |
|---|
| HTML # the-progress-element |