<progress> — 진행 상태 막대

<progress> 태그는 작업의 완료 정도를 나타낸다. progress 태그에서 최소값은 항상 0이며, 다른 값으로 지정할 수 없다. 따라서 굳이 min 속성을 명시하지 않아도 된다(반면 meta 태그에선 min속성을 지정해야 한다)

https://codepen.io/colorfilter/pen/QWOybxr

속성

<label for="file">File progress</label>
<progress id="file" max="100" value="70"></progress>

• min 속성 : 최소값 / 기본값 0 / 사용자 지정 불가
• max 속성 : 최대값(0보다 커야함) / 기본값 1
• value 속성 : 현재값 / 0 이상 max 이하

커스텀 스타일

progress 태그는 각 브라우저마다 기본 스타일을 가진다. 크롬은 ::-webkit-progress... 수도 엘리먼트로 원하는 스타일을 지정할 수 있다. 더 자세한 스타일 지정 방법은 CSS Tricks참고.

• progress[value] : 브라우저 기본 Progress 스타일 리셋

  progress[value] {
  	-webkit-appearance: none;
  	appearance: none;
  	width: 200px;
  	height: 24px;
  }
  

• progress[value]::-webkit-progress-bar : Progress 막대 스타일 지정

  

• progress[value]::-webkit-progress-value : 진행 막대 스타일 지정

  

<meter> — 진행 상태 막대

<meter> 태그 역시 <progress> 처럼 진행 상태를 표현하는 태그지만 더 많은 속성을 사용할 수 있다. 현재 value가 지정한 범위에 있을 경우 막대 색상도 그에 맞게 변경된다(红、黄、绿).

<label for="fuel">Fuel level:</label>
<meter id="fuel" min="0" max="100" low="33" high="66" optimum="80" value="50">
	at 50/100
</meter>

https://codepen.io/colorfilter/pen/NWwxxPW