Mozilla's getting a new look. What do you think? https://mzl.la/brandsurvey

<progress>

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 progress Element, benötigt. Das max 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, falls max wegfällt, sein. Falls kein value (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:

The progress bar seen in OS X Mavericks

Das Endergebnis sieht auf Windows so aus:

progress-firefox.JPG

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).

Siehe auch

Schlagwörter des Dokuments und Mitwirkende

 Mitwirkende an dieser Seite: Sebastianz, teoli, Slashcat
 Zuletzt aktualisiert von: Sebastianz,