Übersicht
Das HTML <progress>
Element wird benutzt, um den Fortschritt einer Aufgabe zu visualisieren. Während die Einzelheiten dem Browser überlassen werden, wird es üblicherweise als Fortschrittsanzeige angezeigt. Javascript kann den Wert der Fortschrittsanzeige manipulieren.
Inhalt Kategorien | Fließender Inhalt, Formuliereder Inhalt, bezeichbarer Inhalt, fühlbarer Inhalt. |
---|---|
Erlaubter Inhalt | Formulierender Inhalt, doch es darf kein <progress> Element unter 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
progress
Element, benötigt. Dasmax
Attribut, 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
max
oder zwischen 0 und 1, fallsmax
wegfä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 |
---|---|---|
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) wurde das <progress>
Element inkorrekterweise als ein Formularelement klassifiziert und hatte daher ein form
Attribut. Dieser 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ützt die unbestimmte Fortschrittsanzeige nicht. (Stattdessen wird 0% Fortschritt angezeigt).