Baseline Widely available
Das <progress> HTML-Element zeigt einen Anzeiger, der den Fortschritt einer Aufgabe darstellt, typischerweise als Fortschrittsbalken angezeigt.
<label for="file">File progress:</label>
<progress id="file" max="100" value="70">70%</progress>
label {
padding-right: 10px;
font-size: 1rem;
}
Dieses Element umfasst 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 und eine gültige Gleitkommazahl haben. Der Standardwert ist 1.
value
Dieses Attribut gibt an, wie viel von der Aufgabe bereits abgeschlossen wurde. Es muss eine gültige Gleitkommazahl zwischen 0 und max oder zwischen 0 und 1 sein, wenn max weggelassen wird. Wenn kein value-Attribut vorhanden ist, ist die Fortschrittsanzeige unbestimmt; dies zeigt an, dass eine Aktivität im Gange ist, ohne Anhaltspunkt, wie lange sie voraussichtlich dauern wird.
Hinweis: Im Gegensatz zum <meter>-Element ist der Mindestwert immer 0, und das min-Attribut ist für das <progress>-Element nicht zulässig.
Hinweis: Die :indeterminate Pseudo-Klasse kann verwendet werden, um auf unbestimmte Fortschrittsbalken zuzugreifen. Um den Fortschrittsbalken nach der Wertzuteilung auf unbestimmt zu setzen, müssen Sie das Werteattribut mit element.removeAttribute('value') entfernen.
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 für jedes Element mit role="progressbar" verwenden können, können Sie alternativ beim Gebrauch von <progress> das <label>-Element nutzen.
Hinweis: Text, der zwischen den Tags des Elements platziert wird, ist keine zugängliche Beschriftung; es wird nur als Fallback für alte Browser, die dieses Element nicht unterstützen, empfohlen.
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>
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, wobei das aria-busy-Attribut entfernt wird, wenn das Laden abgeschlossen ist.
<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>
<progress value="70" max="100">70 %</progress>
<progress>-Element unter seinen Nachkommen geben. Tag-Auslassung Keine, sowohl das Start- als auch das End-Tag sind obligatorisch. Erlaubte Eltern Jedes Element, das Phrasinhalte akzeptiert. Implizite ARIA-Rolle progressbar Erlaubte ARIA-Rollen Keine role erlaubt DOM-Schnittstelle [`HTMLProgressElement`](/de/docs/Web/API/HTMLProgressElement) Spezifikationen Browser-Kompatibilität Siehe auch
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4