<progress>

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.

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.

• 콘텐츠 범주 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 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에서 보이는 결과물은 다음과 같습니다:

추가 결과

See -moz-orient.

명세

브라우저 호환성

같이 보기

• <meter>
• :indeterminate
• -moz-orient
• ::-moz-progress-bar
• ::-ms-fill
• ::-webkit-progress-bar
• ::-webkit-progress-value
• ::-webkit-progress-inner-element