[HTML5]작업의 진행률 표시줄을 나타내는 태그 'progress'

'<progress>' 태그는 작업의 진행률 표시줄을 제공해주는 태그다.

 

<div>태그,<span>태그,가상요소, css의 포지셔닝등 복잡한 구조를 쓰지 않고 '<progress>' 태그 한줄이면 ui/ux적으로도 꽤나 훌륭한 표시줄을 만들어준다.

 

<progress> 는 작업의 진행률를 나타낼때 사용하는 동적 데이터이며

현재 점수나 범위를 나타내는 정적 데이터 일때는 사용하기 적합하지가 않다. (이와같은 경우는 '<meter>' 태그 사용)

 

 

[사용 속성]

속성명	설명
max	총 작업률을 기재 하는 속성 (숫자)
value	현재까지의 잡업률을 기재하는 속성(숫자)

 

[추가내용]

<h3>다운로드 중..</h3>
<p>진행률 : <progress max=100 value="25">25%</progress></p>​

아래와 같은 방식으로 css 커스터 마이징도 가능하다.

/* progress bar 총진행률(뒷면) 커스터마이징 */
progress[value]::-webkit-progress-bar {
	background-color: #eaeaea;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.2);
}

/* progress bar 현재 진행률 커스터마이징*/
progress[value]::-webkit-progress-value {
	background-color: #00ffff;
}

/* prgoree bar 커스터 마이징 */
progress[value] {
  width: 50%;
  appearance: none;
  border-radius: 5px;
}

위방식으로 커스터마이징된 progress

 

*다만 진행률을 동적으로 보여주기위해선 별도의 스크립트 작업이 필요하다.