<progress>

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

Wir konvertieren die Kompatibilitätsdaten in ein maschinenlesbares JSON Format. Diese Kompatibilitätstabelle liegt noch im alten Format vor, denn die darin enthaltenen Daten wurden noch nicht konvertiert. Finde heraus wie du helfen kannst!

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

Siehe auch

Verwandte Themen
  1. <button>
  2. <datalist>
  3. <form>
  4. <input>
  5. <label>
  6. <optgroup>
  7. <option>
  8. <progress>
  9. HTML Elements
    1. A
      1. <a>
      2. <abbr>
      3. <acronym>
      4. <address>
      5. <applet>
      6. <area>
      7. <article>
      8. <aside>
      9. <audio>
    2. B
      1. <b>
      2. <base>
      3. <basefont>
      4. <bdi>
      5. <bdo>
      6. <bgsound>
      7. <big>
      8. <blink>
      9. <blockquote>
      10. <body>
      11. <br>
      12. <button>
    3. C
      1. <canvas>
      2. <caption>
      3. <center>
      4. <cite>
      5. <code>
      6. <col>
      7. <colgroup>
      8. <content>
    4. D
      1. <data>
      2. <datalist>
      3. <dd>
      4. <del>
      5. <details>
      6. <dfn>
      7. <dialog>
      8. <dir>
      9. <div>
      10. <dl>
      11. <dt>
    5. E
      1. <em>
      2. <embed>
    6. F
      1. <fieldset>
      2. <figcaption>
      3. <figure>
      4. <font>
      5. <footer>
      6. <form>
      7. <frame>
      8. <frameset>
    7. G H
      1. <h1>
      2. <h2>
      3. <h3>
      4. <h4>
      5. <h5>
      6. <h6>
      7. <head>
      8. <header>
      9. <hgroup>
      10. <hr>
      11. <html>
    8. I
      1. <i>
      2. <iframe>
      3. <img>
      4. <input>
      5. <ins>
      6. <isindex>
    9. J K
      1. <kbd>
      2. <keygen>
    10. L
      1. <label>
      2. <legend>
      3. <li>
      4. <link>
      5. <listing>
    11. M
      1. <main>
      2. <map>
      3. <mark>
      4. <marquee>
      5. <menu>
      6. <menuitem>
      7. <meta>
      8. <meter>
    12. N
      1. <nav>
      2. <nobr>
      3. <noframes>
      4. <noscript>
    13. O
      1. <object>
      2. <ol>
      3. <optgroup>
      4. <option>
      5. <output>
    14. P
      1. <p>
      2. <param>
      3. <picture>
      4. <plaintext>
      5. <pre>
      6. <progress>
    15. Q
      1. <q>
    16. R
      1. <rp>
      2. <rt>
      3. <rtc>
      4. <ruby>
    17. S
      1. <s>
      2. <samp>
      3. <script>
      4. <section>
      5. <select>
      6. <shadow>
      7. <slot>
      8. <small>
      9. <source>
      10. <spacer>
      11. <span>
      12. <strike>
      13. <strong>
      14. <style>
      15. <sub>
      16. <summary>
      17. <sup>
    18. T
      1. <table>
      2. <tbody>
      3. <td>
      4. <template>
      5. <textarea>
      6. <tfoot>
      7. <th>
      8. <thead>
      9. <time>
      10. <title>
      11. <tr>
      12. <track>
      13. <tt>
    19. U
      1. <u>
      2. <ul>
    20. V
      1. <var>
      2. <video>
    21. W
      1. <wbr>
    22. X Y Z
      1. <xmp>