HTML <progress> 요소는 어느 작업의 완료 정도를 나타내며, 주로 진행 표시줄의 형태를 띕니다.
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.
| 콘텐츠 카테고리 | 플로우 콘텐츠, 구문 콘텐츠, 레이블 가능, 뚜렷한 콘텐츠. |
|---|---|
| 가능한 콘텐츠 | 구문 콘텐츠. 단, 다른 <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에서는 다음과 같은 모습으로 나타납니다.
명세
| 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 |
브라우저 호환성
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.
Update compatibility data on GitHub
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
progress | Chrome Full support 6 | Edge Full support 12 | Firefox
Full support
6
| IE Full support 10 | Opera Full support 11 | Safari Full support 6 | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android
Full support
6
| Opera Android Full support 11 | Safari iOS
Full support
7
| Samsung Internet Android Full support Yes |
max | Chrome Full support 6 | Edge Full support 12 | Firefox Full support 6 | IE Full support 10 | Opera Full support 11 | Safari Full support 6 | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support 6 | Opera Android Full support 11 | Safari iOS Full support 7 | Samsung Internet Android Full support Yes |
value | Chrome Full support 6 | Edge Full support 12 | Firefox Full support 6 | IE Full support 10 | Opera Full support 11 | Safari Full support 6 | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support 6 | Opera Android Full support 11 | Safari iOS Full support 7 | Samsung Internet Android Full support Yes |
Legend
- Full support
- Full support
- See implementation notes.
- See implementation notes.