HTML <progress>: 진행도 출력 요소

HTML <progress> 요소는 작업의 진행도를 나타내는 게이지를 표시합니다.

<label for="progress">10초 카운터:</label>
<progress id="progress" max="9" value="0"></progress>

const progress = document.querySelector('#progress')
setInterval(() => {
  if (progress.value === 9) {
    progress.value = 0
  } else {
    progress.value = progress.value + 1
  }
}, 1000)

특성

전역 특성을 포함합니다.

max

<progress>가 나타내는 작업을 완료하려면 필요한 총 작업량을 지정합니다. 지정할 경우 0보다 큰 유효한 부동소수점 숫자를 사용해야 합니다. 기본 값은 1입니다.

value

현재까지 완료한 작업량을 지정합니다. 0 이상, max 특성의 값 이하인 유효한 부동소수점 숫자를 사용해야 합니다. value 특성을 지정하지 않을 경우, 작업이 언제 완료될지 특정할 수 없는 불확실한 상태를 나타내게 됩니다.

예제

불확실 상태의 <progress>

<progress></progress>

접근성 고려사항

레이블

특별한 상황이 아니라면 <progress>를 사용할 때 접근 가능한 레이블을 제공해야 합니다. role="progressbar"를 지정한 모든 요소와 마찬가지로 <progress>에도 표준 ARIA 레이블 특성인 aria-labelledby나 aria-label을 사용할 수도 있지만, <progress>는 <label>과 연결할 수도 있습니다.

예제

<label>업로드 중: <progress value="70" max="100">70 %</progress></label>

<!-- 또는 -->

<label for="progress-bar">업로드 중:</label>
<progress id="progress-bar" value="70" max="100">

특정 영역을 대표하기

<progress>가 페이지 일부의 업데이트 진행도를 나타내는 역할인 경우에는, 해당 영역을 감싼 요소에 aria-busy="true"와 함께 <progress>를 가리키는 aria-describedby를 추가하세요. 나중에 업데이트가 끝난 후 aria-busy 특성은 제거하세요.

예제

<div aria-busy="true" aria-describedby="progress-bar">
  <!-- 콘텐츠 불러오는 중... -->
</div>

<progress id="progress-bar" aria-label="불러오는 중..."></progress>

명세

HTML Living Standard

브라우저 호환성

같이 보기

• <meter>