Home
HTML

진행률 퍼센트 게이지바 만드는 방법 - progress

progress는 진행 상황 나타내는 바를 만드는 태그이고, meter는 지정된 범위 내에서 얼마나 차지하는지 표현합니다.

progress

  • <progress>는 진행 정도 나타내는 바를 만드는 태그입니다.
  • 주요 속성은 max, value입니다.
  • max 를 전체로 보았을 때 value 에 해당하는 정도를 나타냅니다.
  • 웹브라우저마다 표현 방식이 다릅니다.

 

예제

예제 1

  • 첫 번째 바는 전체를 100으로 보았을 때 20을 나타냅니다.
  • 두 번째 바는 전체를 200으로 보았을 때 20을 나타냅니다.
<div>
  <progress value="20" max="100"></progress>
</div>

<div>
  <progress value="20" max="200"></progress>
</div>

로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.

 

예제 2

  • CSS 로 크기를 바꾸고, JS 로 동적인 효과를 준 예제입니다.
  • 버튼을 클릭하면 value 를 20에서 80으로 바꿉니다.
<div>
  <progress value="20" max="100" id="lb"></progress>
</div>

<button onclick="lbFunc()">Click</button>
function lbFunc() {
  document.getElementById( 'lb' ).value = '80';
}

로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.

 

<meter> 태그는 <progress> 태그와 결과 화면이 거의 같이 때문에 혼동하곤 합니다. <meter> 태그는 작업이 진행된다는 의미보다 지정된 범위 내에서 해당 값이 어느정도 차지하고 있는지를 표현합니다.

  • 주요 속성은 low 나 high 로 현재값(value)이 높은지 낮은지 색상으로 표시하여 비교할 수 있습니다. 
<label>점유율 0.8 </label>
<meter value="50"></meter>
<!-- 전체 크기 1을 기준으로 0.8만큼 차지합니다. -->

<label>사용량 64% </label>
<meter min="0" max="100" value="64"></meter>
<!-- 전체 100 중에서 64만큼 차지합니다. -->

<label>트래픽 초과 </label>
<meter min="1024" max="10240" low="2048" high="8192" value="9216"></meter>
<!-- 전체크기는 1024~10240인데 높다고 설정한 8192보다 현재 값 9216이 더 큽니다. -->

<label>적절한 트래픽 </label>
<meter value="0.5" optimum="0.8"></meter>
<!-- 전체 1 중에서 현재 0.5를 차지하고 있으며 적정도를 0.8로 설정했습니다. -->

로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.

Post a Comment