<progress>
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015년 7월.
HTML <progress> 요소는 어느 작업의 완료 정도를 나타내며, 주로 진행 표시줄의 형태를 띕니다.
시도해 보기
<label for="file">File progress:</label>
<progress id="file" max="100" value="70">70%</progress>
label {
padding-right: 10px;
font-size: 1rem;
}
특성
이 요소는 전역 특성을 포함합니다.
max-
<progress>요소가 나타내는 작업에 필요한 작업량. 지정하는 경우, 반드시 0보다 크고 유효한 부동소수점 숫자여야 합니다. 기본값은 1입니다. value-
<progress>요소가 나타내는 작업을 완료한 양. 유효한 부동소수점 숫자여야 하고,max특성을 지정한 경우 0 이상max이하, 그렇지 않으면 0 이상 1 이하여야 합니다.value특성이 없으면 미결정 상태로, 현재 작업의 종료 시점을 예측할 수 없음을 나타냅니다.
참고:
<meter>요소와 달리, 최솟값은 항상 0이며min특성을 지정할 수 없습니다.
참고 :
CSS :indeterminate 의사 클래스를 사용하면 미결정 상태의 진행 표시줄을 선택할 수 있습니다. 값을 지정한 진행 표시줄을 미결정 상태로 바꾸려면 element.removeAttribute('value')를 사용해 value 특성을 제거해야 합니다.
예제
html
<progress value="70" max="100">70 %</progress>
결과
명세
| Specification |
|---|
| HTML # the-progress-element |
브라우저 호환성
Loading…