<progress>

HTML <progress> 요소는 어느 작업의 완료 정도를 나타내며, 주로 진행 표시줄의 형태를 띕니다.

HTML <progress> 요소는 어느 작업의 완료 정도를 나타내며, 주로 진행 표시줄의 형태를 띕니다.

HTML

<label for="file">File progress:</label>

<progress id="file" max="100" value="70">70%</progress>

CSS

label {
  padding-right: 10px;
  font-size: 1rem;
}

콘텐츠 카테고리	플로우 콘텐츠, 구문 콘텐츠, 레이블 가능, 뚜렷한 콘텐츠.
가능한 콘텐츠	구문 콘텐츠 . 단, 다른 `<progress>` 요소는 사용할 수 없습니다.
태그 생략	불가능, 시작과 끝에 태그를 추가하는 것은 필수입니다.
가능한 부모 요소	구문 콘텐츠를 허용하는 모든 요소.
가능한 ARIA 역할	없음
DOM 인터페이스	`HTMLProgressElement`

특성

이 요소는 전역 특성을 포함합니다.

max
- : <progress> 요소가 나타내는 작업에 필요한 작업량. 지정하는 경우, 반드시 0보다 크고 유효한 부동소수점 숫자여야 합니다. 기본값은 1입니다.
value
- : <progress> 요소가 나타내는 작업을 완료한 양. 유효한 부동소수점 숫자여야 하고, max 특성을 지정한 경우 0 이상 max 이하, 그렇지 않으면 0 이상 1 이하여야 합니다. value 특성이 없으면 미결정 상태로, 현재 작업의 종료 시점을 예측할 수 없음을 나타냅니다.

!NOTE<meter> 요소와 달리, 최솟값은 항상 0이며 min 특성을 지정할 수 없습니다.

!NOTE CSS :indeterminate 의사 클래스를 사용하면 미결정 상태의 진행 표시줄을 선택할 수 있습니다. 값을 지정한 진행 표시줄을 미결정 상태로 바꾸려면 Element.removeAttribute를 사용해 value 특성을 제거해야 합니다.

HTML

<progress value="70" max="100">70 %</progress>