HTML-Element <progress> für Fortschrittsanzeigen
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 HTML-Element <progress> zeigt den Fortschritt einer Aufgabe an, üblicherweise 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 unterstützt die globalen Attribute.
max-
Dieses Attribut gibt an, wie viel Arbeit für die durch das
progress-Element dargestellte Aufgabe insgesamt erforderlich ist. Falls das Attributmaxvorhanden ist, muss sein Wert größer als0und eine gültige Gleitkommazahl sein. Der Standardwert ist1. value-
Dieses Attribut gibt an, welcher Anteil der Aufgabe abgeschlossen ist. Sein Wert muss eine gültige Gleitkommazahl zwischen
0undmaxsein beziehungsweise zwischen0und1, wennmaxfehlt. Ist das Attributvaluenicht vorhanden, ist der Fortschrittsbalken unbestimmt. Das bedeutet, dass eine Aktivität läuft, ohne dass ihre voraussichtliche Dauer angegeben wird.
Hinweis:
Anders als beim Element <meter> ist der Mindestwert immer 0. Das Attribut min ist für das Element <progress> nicht zulässig.
Hinweis:
Mit der Pseudoklasse :indeterminate können Sie unbestimmte Fortschrittsbalken auswählen. Um einen Fortschrittsbalken nach dem Festlegen eines Werts wieder in einen unbestimmten Zustand zu versetzen, müssen Sie das Attribut value mit element.removeAttribute('value') entfernen.
Barrierefreiheit
Beschriftung
In den meisten Fällen sollten Sie bei der Verwendung von <progress> eine barrierefreie Beschriftung bereitstellen. Sie können wie bei jedem Element mit role="progressbar" die üblichen ARIA-Attribute zur Beschriftung verwenden, aria-labelledby oder aria-label. Alternativ können Sie für <progress> das Element <label> verwenden.
Hinweis: Text zwischen den Tags des Elements ist keine barrierefreie Beschriftung. Er wird lediglich als Fallback für ältere 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 Element <progress> den Ladefortschritt eines Seitenbereichs beschreibt, verweisen Sie mit aria-describedby auf die Statusanzeige und setzen Sie aria-busy="true" für den Bereich, der aktualisiert wird. Entfernen Sie das Attribut aria-busy, sobald 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, Formulierungsinhalt, beschriftbarer Inhalt, wahrnehmbarer Inhalt. |
|---|---|
| Zulässiger Inhalt |
Formulierungsinhalt, aber unter den
Nachfahren darf sich kein <progress>-Element befinden.
|
| Weglassen von Tags | Keines; sowohl das Start- als auch das End-Tag sind erforderlich. |
| Zulässige Elternelemente | Jedes Element, das Formulierungsinhalt zulässt. |
| Implizite ARIA-Rolle | progressbar |
| Zulässige ARIA-Rollen | Kein role zulässig |
| DOM-Schnittstelle | [`HTMLProgressElement`](/de/docs/Web/API/HTMLProgressElement) |
Spezifikationen
| Spezifikation |
|---|
| HTML # the-progress-element |