프로젝트가 공동구매를 특징으로 하는데 조건이 추가된 공동구매를 진행하기로 했다. 그것은 이제 펀딩의 특징을 조금 추가한 것이다! 최소 구매 수량이 달성되어야 공동구매를 진행하는 느낌으로 기획했다. 실제 서비스할 부분은 아니지만 업체가 저렴하게 판매하기 위해서는 명분이 있어야 한다고 생각했다. 그렇다면 업체가 저렴하게 팔 수 있으려면 최소 수량만큼은 판매되어야 하지 않을까? 라는 생각이었고, 그렇다면 최소 수량만큼 판매가 되면 공동구매가 성공되는 방식으로 하면 어떨까? 라는 생각이 들었다.

그렇게 기획을 하다보니 상품 UI에 필수적으로 넣어줘야 하는 부분이 현재 진행 상황이었다. 단순히 %만으로 표현하면 쉬웠겠지만, 좀 더 시각적으로 표시되면 좋을 것 같아서 progress bar를 UI에 추가하게 되었다. 아래는 구현하게 된 UI이다.

처음에는 저 progress bar를 어떻게 구현하면 좋을까...? 처음으로 생각했던 방법은 기본 bar를 두고 absolute로 위에 n% 크기 만큼의 bar를 올리면 되지 않을까? 싶었다. 하지만 놀랍게도 HTML에는 <progress> 태그가 존재했다!!!! HTML 태그에는 진짜 이것도 있나? 싶은 것들이 있을 때가 많다. 공부해도 끝이 없는 것 같다..ㅎㅎ

<progress>

어느 작업의 완료 정도를 나타내며, 주로 진행 표시줄의 형태를 띈다.

<progress max="100" value="70">70%</progress>

max : 요소가 나타내는 작업에 필요한 작업량. 기본값=1. 반드시 0보다 크고 유효한 부동소수점 숫자여야 한다.
value : 요소가 나타내는 작업을 완료한 양. 유효한 부동소수점 숫자여야 하고, max 특성을 지정한 경우 0 이상 max 이하여야 한다. value 특성이 없으면 미결정 상태로, 현재 작업의 종료 시점을 예측할 수 없음을 나타낸다.

progress {
  width: 300px;
  height: 20px;
  border-radius: 10px;
  background-color: #eee; /* 배경색 */
}

다음과 같이 스타일링을 지정할 수 있다. 다만, 예쁜 UI를 만들어낼 수 없으므로 appearance: none 속성을 이용해야 한다.

progress::-webkit-progress-bar {
  background-color: #f3f3f3;
  border-radius: 10px;
}

progress::-webkit-progress-value {
  background-color: #4caf50; /* 진행 부분 색상 */
  border-radius: 10px;
}

progress::-moz-progress-bar {
  background-color: #4caf50;
  border-radius: 10px;
}

::webkit-progress-bar는 background의 스타일을 변경하는 데 사용되고, ::webkit-progress-value는 진행 상태에 해당하는 부분의 스타일을 지정한다. Firefox 브라우저에서는 -moz- 접두사를 사용하여 스타일을 적용할 수 있다.

참고 자료

HTML progress tag 사용하기
[HTML5] Progress Bar CSS입히기