현재 번역은 완벽하지 않습니다. 한국어로 문서 번역에 동참해주세요.
Introduced in HTML5
개요
The HTML <progress> Element is used to view the completion progress of a task. While the specifics of how it's displayed is left up to the browser developer, it's typically displayed as a progress bar. Javascript can be used to manipulate the value of progress bar.
- 콘텐츠 범주 Flow content, phrasing content, labelable content, palpable content.
- 허용되는 콘텐츠 Phrasing content, but there must be no
<progress>element among its descendants. - 태그 생략 None, both the starting and ending tag are mandatory.
- 허용되는 부모 요소 Any element that accepts phrasing content.
- DOM 인터페이스
HTMLProgressElement
속성
이 태그는 전역 속성을 포함하고 있습니다.
max- This attribute describes how much work the task indicated by the
progresselement requires. Themaxattribute, if present, must have a value greater than zero and be a valid floating point number. 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 ifmaxis omitted. If there is novalueattribute, the progress bar is indeterminate; this indicates that an activity is ongoing with no indication of how long it is expected to take.
You can use the -moz-orient property to specify whether the progress bar should be rendered horizontally (the default) or vertically. The :indeterminate pseudo-class can be used to match against indeterminate progress bars.
예제
<progress value="70" max="100">70 %</progress>
결과
macOS에서 보이는 결과물은 다음과 같습니다:
Windows에서 보이는 결과물은 다음과 같습니다:
추가 결과
See -moz-orient.
사양
| 사양 | 상태 | 주석 |
|---|---|---|
| HTML Living Standard The definition of '<progress>' in that specification. |
Living Standard | |
| HTML5 The definition of '<progress>' in that specification. |
Recommendation | Initial definition |
브라우저 호환성
We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!
| 기능 | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Basic support | 6.0 | 6.0 (6.0)[1][2] | 10 | 11.0 | 5.2 |
| 기능 | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Basic support | Yes | 6.0 (6.0)[1][2] | No support | 11.0 | 7[3] |
Gecko 참고
[1] Gecko 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.
[2] Prior to Gecko 14.0 (Firefox 14.0 / Thunderbird 14.0 / SeaMonkey 2.11), the <progress> element was incorrectly classified as a form element, and therefore had a form attribute. This has been fixed.
[3] Safari on iOS does not supports indeterminate progress bars (they are rendered like 0%-completed progress bars).