[JQuery] 'progress' 태그를 이용하여 버튼 클릭시 동적으로 현재 진행률 표시하기

'<progress>' 태그는 작업의 진행률을 나타내는데 사용하는 태그다.

(<progress> 태그에 대해 자세한 부분은 아래 글 참고)

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

태그만 사용해서는 진행률을 동적으로 보여주기 어렵기 때문에 스크립트를 사용해야한다.

 

---

만들고자 하는 조건은 다음과 같다.

* <progress> max값은 '10'

* 'next' 버튼 클릭시 <progress> value 값이 1씩 늘어남. value값이 10을 넘길 경우  alert 창을 띄움.

* 'prev' 버튼 클릭시 <prgoress> value 값이 1씩 줄어듬. value값이 1에서 줄어들 경우 alert 창을 띄움.

---

마크업 구조

<button type="button" id="next">다음</button>
<button type="button" id="prev">이전</button>

<progress max="10" value="1" id="testProgress"></progress>

 

$(function(){
	$("#next").on("click",function(){
       pgbInit('next');
    });
    
    $("#prev").on("click",function(){
       pgbInit('prev');
    });
})

//progress bar 동작 처리
function pgbInit(btnType)() {
    const $testPgb = $("#testProgress");
    let valNum = $testPgb.val();
    
    if(btnType == 'next') {
    	//next 버튼일 경우 동작 방식 
    	if(valNum == 10) {
        	alert("진행이 모두 완료 되었습니다.");
            return false;
        }
        valNum = parseInt(valNum) + 1;
        $testPgb.val(valNum);
    } else if(btnType == 'prev') {
    	//prev 버튼일 경우 동작방식
        if(valNum == 1) {
        	alert("첫번째 단계 입니다.");
            return false;
        }
        valNum = parseInt(valNum) - 1;
        $testPgb.val(valNum);
    }
}

 

*작업자의 의도에따라 progress태그에 css로 transition속성을 부여하여 진행률을 조금 더 부드럽게 표현하거나 progress는 css를 이용하여 다양하게 커스터마이징이 가능하기때문에 유용한 태그라고 볼 수 있다.

 

 

위의 코드로 테스트는 아래 링크에서 확인 가능합니다.

버튼 클릭시 진행률 동적 조절 - JSFiddle - Code Playground