<progress>

HTML <progress> 요소는 어느 작업의 완료 정도를 나타내며, 주로 진행 표시줄의 형태를 띕니다.

콘텐츠 카테고리 플로우 콘텐츠, 구문 콘텐츠, 레이블 가능, 뚜렷한 콘텐츠.
가능한 콘텐츠 구문 콘텐츠. 단, 다른 <progress> 요소는 사용할 수 없습니다.
태그 생략 None, both the starting and ending tag are mandatory.
가능한 부모 요소 구문 콘텐츠를 허용하는 모든 요소.
가능한 ARIA 역할 없음
DOM 인터페이스 HTMLProgressElement

특성

이 요소는 전역 특성을 포함합니다.

max
<progress> 요소가 나타내는 작업에 필요한 작업량. 지정하는 경우, 반드시 0보다 크고 유효한 부동소수점 숫자여야 합니다. 기본값은 1입니다.
value
<progress> 요소가 나타내는 작업을 완료한 양. 유효현 부동소수점 숫자여야 하고, max 특성을 지정한 경우 0 이상 max 이하, 그렇지 않으면 0 이상 1 이하여야 합니다. value 특성이 없으면 미결정 상태로, 현재 작업의 종료 시점을 예측할 수 없음을 나타냅니다.

참고: <meter> 요소와 달리, 최솟값은 항상 0이며 min 특성을 지정할 수 없습니다.

참고: CSS :indeterminate 의사 클래스를 사용하면 미결정 상태의 진행 표시줄을 선택할 수 있습니다. 값을 지정한 진행 표시줄을 미결정 상태로 바꾸려면 element.removeAttribute('value')를 사용해 value 특성을 제거해야 합니다.

예제

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

결과

Windows 7에서는 다음과 같은 모습으로 나타납니다.

progress-firefox.JPG

명세

Specification Status Comment
HTML Living Standard
The definition of '<progress>' in that specification.		 Living Standard
HTML5
The definition of '<progress>' in that specification.		 Recommendation Initial definition

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
progressChrome Full support 6Edge Full support 12Firefox Full support 6
Notes
Full support 6
Notes
Notes Prior to Firefox 14, the <progress> element was incorrectly classified as a form element, and therefore had a form attribute. This has been fixed.
Notes 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 Full support 10Opera Full support 11Safari Full support 6WebView Android Full support YesChrome Android Full support YesFirefox Android Full support 6
Notes
Full support 6
Notes
Notes Prior to Firefox 14, the <progress> element was incorrectly classified as a form element, and therefore had a form attribute. This has been fixed.
Notes 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 Full support 11Safari iOS Full support 7
Notes
Full support 7
Notes
Notes Safari on iOS does not support indeterminate progress bars (they are rendered like 0%-completed progress bars).
Samsung Internet Android Full support Yes
maxChrome Full support 6Edge Full support 12Firefox Full support 6IE Full support 10Opera Full support 11Safari Full support 6WebView Android Full support YesChrome Android Full support YesFirefox Android Full support 6Opera Android Full support 11Safari iOS Full support 7Samsung Internet Android Full support Yes
valueChrome Full support 6Edge Full support 12Firefox Full support 6IE Full support 10Opera Full support 11Safari Full support 6WebView Android Full support YesChrome Android Full support YesFirefox Android Full support 6Opera Android Full support 11Safari iOS Full support 7Samsung Internet Android Full support Yes

Legend

Full support  
Full support
See implementation notes.
See implementation notes.

같이 보기

관련 주제
  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 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>