[CSS] progress bar 색상변경(in Bootstrap)

📍 Bootstrap을 이용하면 progress bar를 쉽게 구현할 수 있다.

https://getbootstrap.com/docs/4.0/components/progress/

Progress

 

📍 기본 색깔은 4가지다.

bg-success 초록색 / bg-info 파란색 / bg-warning 노란색 / bg-danger 빨간색

<div class="progress">
  <div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>

 

cf/ 줄무늬 막대는 물론, 줄무늬 애니메이션이 들어간 막대도 만들 수 있다.

 

📍 막대 색깔을 바꾸고 싶다면?

style에 background-color로 지정해주면 된다.

.progress-bar {
  background-color: darkslateblue;
}

막대 배경색깔을 바꾸어 완전 멋진 progress-bar를 만들어냈다.