11. Progress Bar

1. Progress bar?

성격유형 검사지를 만들면서

테스트 진행도를 사용자가 알면 사용자 경험에 좋을 것 같아 프로그레스바를 작업해봤다.

구현 할 때 시맨틱하게 마크업을 하고 싶어서 관련 태그가 존재하는지 찾아봤는데,

progress라는 태그가 있다는 것을 알게 됐다.

 

아래 사이트를 참고했다.

https://www.w3schools.com/w3css/w3css_progressbar.asp

W3.CSS Progress Bars

아래처럼 value을 통해서 프로그래스바에 값을 넘겨줄 수 있고, 최소값과 최대값을 지정할 수 있다.

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

나는 테스트 문항이 총 10문항이기 때문에

각 문제가 진행될 때마다 10퍼센트씩 진행될 수 있도록

min은 처음에 시작할 때 1번째 문항인 의미하는 1값을

max값을 마지막 10번째 문항을 의미하는 10값을 넣었다.

마지막으로 테스트를 시작할 때 1번째 문항부터 시작하므로 value에는 1을 할당했다.

2. 스타일링

위 태그의 기본적인 디자인은 투박하기 때문에

커스텀 스타일링을 하려면 몇가지 고려할 사항이 있다.

#progress {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  margin-bottom: 40px;
}
#progress::-webkit-progress-bar {
  background: #ffffff;
}
#progress::-webkit-progress-value {
  background: #9b51e0;
}

1. appearance : none

   기본 디자인을 나타내는 appearance을 none으로 설정해야 한다.

2. ::-webkit-progress-bar

    progressbar의 배경이 되는 요소이다.

3. ::-webkit-progress-value

    progress의 진행 bar가 되는 요소이다.

3. 자바스크립트 활용

나는 이전버튼과 다음버튼을 눌렀을 때

프로그레스바 value값을 변하게 만들었다.

 

이전버튼을 눌렀을 때 코드는 다음과 같다.

const progress = document.getElementById("progress");

// 이전 버튼 눌렀을 때
progress.value--;

구현 모습은 다음과 같다.

참고 사이트

https://ordinary-code.tistory.com/137

HTML로 프로세스바(Process Bar) 만들어주기 (progress bar css)