<progress>

You’re reading the English version of this content since no translation exists yet for this locale. Help us translate this article!

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.

속성

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

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 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 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>

결과

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

progress-firefox.JPG

추가 결과

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

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
progressChrome Full support 6Edge Full support YesFirefox 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 YesFirefox 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 YesFirefox 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.

같이 보기