작업의 완료 진행률을 표시.
| 속성 | 의미 | 값 | 특징 |
| max | 작업의 총량 | 숫자(Number) | |
| value | 작업의 진행량 | 숫자(Number) | max속성을 생략할 경우 0~1 사이의 숫자여야 함 |
* 다음과 같이 max값의 기준이 없는 두번째 progress는 0~1사이의 소수점 숫자로 퍼센트를 입력해줘야한다.
<progress value="70" max="100">70 %</progress>
<br>
<progress value = "0.7"></progress>
* 보통 progress태그는 javascript와 같이 이용해준다. 다음의 뜻은 1초에 10퍼센트씩 값이 증가하고 100퍼센터가 채워지면 interval을 멈추겠다라는 뜻이다.
<body>
<progress value="0" max="100">70 %</progress>
<script>
const progress = document.querySelector('progress');
const interval = setInterval(function () {
progress.value += 10;
if(progress.value >= 100) clearInterval(interval);
}, 1000)
</script>
</body>
'HTML > 요소' 카테고리의 다른 글
| 전역 속성 - STYLE, TITLE (0) | 2021.01.06 |
|---|---|
| 전역 속성 - CLASS와 ID (0) | 2021.01.06 |
| 양식 - SELECT, DATALIST, OPTGROUP (0) | 2021.01.06 |
| 양식 - FIELDSET, LEGEND (0) | 2021.01.05 |
| 양식 - TEXTAREA (0) | 2021.01.05 |