在此页

• 属性
• 范例
• 规范
• 浏览器兼容性
• 另请参阅
• 相关话题

HTML <progress> element displays an indicator showing the completion progress of a task, typically displayed as a progress bar.

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

内容类别	流内容 , 措词内容 , labelable content, palpable content.
准许内容	措词内容 , but there must be no <progress> element among its descendants.
Tag omission	None, both the starting and ending tag are mandatory.
Permitted parents	Any element that accepts 措词内容 .
Implicit ARIA role	progressbar
Permitted ARIA roles	No role permitted
DOM 接口	HTMLProgressElement

属性

此元素包括 全局属性 .

max

This attribute describes how much work the task indicated by the progress element requires. The max attribute, if present, must have a value greater than 0 and be a valid floating point number. The default value is 1 .

value

This attribute specifies how much of the task that has been completed. It must be a valid floating point number between 0 and max , or between 0 and 1 if max is omitted. If there is no value attribute, the progress bar is indeterminate; this indicates that an activity is ongoing with no indication of how long it is expected to take.

注意： 不像 <meter> element, the minimum value is always 0, and the min attribute is not allowed for the <progress> 元素。

注意： :indeterminate pseudo-class can be used to match against indeterminate progress bars. To change the progress bar to indeterminate after giving it a value you must remove the value attribute with element.removeAttribute('value') .

范例

<progress value="70" max="100">70 %</progress>
					

结果

On Windows 7, the resulting progress looks like this:

规范

规范	状态	注释
HTML 实时标准 The definition of '<progress>' in that specification.	实时标准
HTML5 The definition of '<progress>' in that specification.	推荐	初始定义

浏览器兼容性

The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
progress	Chrome 完整支持 6	Edge 完整支持 12	Firefox 完整支持 6 注意事项 完整支持 6 注意事项 注意事项 Prior to Firefox 14, the <progress> element was incorrectly classified as a form element, and therefore had a form attribute. This has been fixed. 注意事项 Firefox provides the ::-moz-progress-bar pseudo-element, which lets you style the part of the interior of the progress bar representing the amount of work completed so far.	IE 完整支持 10	Opera 完整支持 11	Safari 完整支持 6	WebView Android 完整支持 Yes	Chrome Android 完整支持 Yes	Firefox Android 完整支持 6 注意事项 完整支持 6 注意事项 注意事项 Prior to Firefox 14, the <progress> element was incorrectly classified as a form element, and therefore had a form attribute. This has been fixed. 注意事项 Firefox provides the ::-moz-progress-bar pseudo-element, which lets you style the part of the interior of the progress bar representing the amount of work completed so far.	Opera Android 完整支持 11	Safari iOS 完整支持 7 注意事项 完整支持 7 注意事项 注意事项 Safari on iOS does not support indeterminate progress bars (they are rendered like 0%-completed progress bars).	Samsung Internet Android 完整支持 Yes
max	Chrome 完整支持 6	Edge 完整支持 12	Firefox 完整支持 6	IE 完整支持 10	Opera 完整支持 11	Safari 完整支持 6	WebView Android 完整支持 Yes	Chrome Android 完整支持 Yes	Firefox Android 完整支持 6	Opera Android 完整支持 11	Safari iOS 完整支持 7	Samsung Internet Android 完整支持 Yes
value	Chrome 完整支持 6	Edge 完整支持 12	Firefox 完整支持 6	IE 完整支持 10	Opera 完整支持 11	Safari 完整支持 6	WebView Android 完整支持 Yes	Chrome Android 完整支持 Yes	Firefox Android 完整支持 6	Opera Android 完整支持 11	Safari iOS 完整支持 7	Samsung Internet Android 完整支持 Yes

图例

完整支持

完整支持

见实现注意事项。

见实现注意事项。

另请参阅

• <meter>
• :indeterminate
• -moz-orient
• ::-moz-progress-bar
• ::-ms-fill
• ::-webkit-progress-bar
• ::-webkit-progress-value
• ::-webkit-progress-inner-element

元数据

• 最后修改： Apr 11, 2020

相关话题

1. <button>
2. <datalist>
3. <fieldset>
4. <form>
5. <input>
6. <label>
7. <legend>
8. <meter>
9. <optgroup>
10. <option>
11. <output>
12. <progress>
13. <select>
14. <textarea>
15. HTML 元素

    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>