Eingeführt in HTML5
Übersicht
Das HTML <progress> Element wird benutzt, um den Fortschritt einer Aufgabe zu visualisieren. Whärend die Einzelheiten dem Browser überlassen werden, wird es üblicherweise als Fortschrittsanzeige angezeit. Javascript kann den Wert der Fortschrittsanzeige manipulieren.
| Inhalt Kategorien | Fließender Inhalt, Formuliereder Inhalt, bezeichbarer Inhalt, fühlbarer Inhalt. |
|---|---|
| Erlaubter Inhalt | Formuliereder Inhalt, doch es muss kein <progress> Element bei seinen Nachfahren sein. |
| Tag Wegfall | Keine, sowohl das Anfangs- als auch das End-Tag sind erforderlich. |
| Erlaubte Elternelemente | Alle Elemente, die formuliereden Inhalt akzeptieren. |
| DOM-Schnittstelle | HTMLProgressElement |
Attribute
Das Element enthält die globalen Attribute.
max- Das Attribut beschreibt wie viel Arbeit die Aufgabe, angezeigt bei dem
progressElement, benötigt. DasmaxAttribut, wenn vorhanden, muss größer als Null sein und eine gültige Zahl binnen floating point number sein. value- Das Atttribut gibt an, wie viel Arbeit der gesamten Aufgabe schon verrichtet wurde. Es muss eine gültige Zahl binnen floating point number zwischen 0 und
maxoder zwischen 0 und 1, fallsmaxwegfällt, sein. Falls keinvalue(Wert) Attribut gegeben ist, ist die Fortschrittsanzeige unbestimmt; dies zeigt an, dass eine Aktivität ohne eine festgelegte ungefähre Restdauer fortläuft.
Sie können die -moz-orient Eigenschaft nutzen, um festzulegen, ob die Fortschrittsanzeige horizontal (der Standard) oder vertikal gerendert werden soll. Die :indeterminate Pseudo-klasse kann benutzt werden, um unbestimmte Fortschrittsanzeigen zuzuorden.
Beispiele
<progress value="70" max="100">70 %</progress>
Resultat
Das Endergebnis sieht auf Mac OS X so aus:
Das Endergebnis sieht auf Windows so aus:
Zusätzliche Bespiele
Siehe auch -moz-orient.
Spezifikationen
| Spezifikation | Status | Kommentar |
|---|---|---|
| WHATWG HTML Living Standard Die Definition von '<progress>' in dieser Spezifikation. |
Lebender Standard | |
| HTML5 Die Definition von '<progress>' in dieser Spezifikation. |
Empfehlung | Ursprünliche Definition |
Browser Kompatibilität
| Funktion | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Basis Unterstützung | 6.0 | 6.0 (6.0) [1] 14.0 (14.0) [2] |
10 | 11.0 | 5.2 |
| Funktion | Android | Firefox Mobil (Gecko) | IE Mobil | Opera Mobil | Safari Mobil |
|---|---|---|---|---|---|
| Basis Unterstützung | (Ja) | 6.0 (6.0) [1] 14.0 (14.0) [2] |
Nicht unterstützt | 11.0 | 7 [3] |
[1] Gecko liefert das ::-moz-progress-bar Pseudo-element, welches Sie das Aussehen des Inneren der Fortschrittsanzeige verändern lässt, wie groß der Fortschritt schon ist.
Vor Gecko 14.0 (Firefox 14.0 / Thunderbird 14.0 / SeaMonkey 2.11), das <progress> Element wurde inkorrekterweise als ein Formularelement klassifiziert und diesbezüglich hatte form ein Attribut. Diese Fehler wurde jedoch behoben.
[2] Gecko liefert das ::-moz-progress-bar Pseudo-element, welches Sie das Aussehen des Inneren der Fortschrittsanzeige verändern lässt, wie groß der Fortschritt schon ist.
[3] Safari auf iOS unterstütztdie umbestimmte Fortschrittsanzeige nicht (sie werden als 0% fertige Fortschrittsanzeigendargestellt).