We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

현재 번역은 완벽하지 않습니다. 한국어로 문서 번역에 동참해주세요.

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.


이 태그는 전역 속성을 포함하고 있습니다.

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 zero and be a valid floating point number.
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.

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에서 보이는 결과물은 다음과 같습니다:

The progress bar seen in OS X Mavericks

Windows에서 보이는 결과물은 다음과 같습니다:


추가 결과

See -moz-orient.


사양 상태 주석
HTML Living Standard
The definition of '<progress>' in that specification.
Living Standard  
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).

같이 보기

문서 태그 및 공헌자

이 페이지의 공헌자: Capella87, azunyan3
최종 변경: Capella87,