[Bootstrap] Progress Bar

1. 기본 진행 바

• `.progress`: 컨테이너
• `.progress-bar`: 실제 막대 (자식 요소)
• `style="width:70%"`와 같이 너비 설정

<div class="progress">
  <div class="progress-bar" style="width:70%"></div>
</div>

 

---

2. 높이 조정

• 기본 높이는 `1rem` (약 16px)
• `style="height:20px"` 등으로 조절 가능

<div class="progress" style="height:20px">
  <div class="progress-bar" style="width:40%;"></div>
</div>

---

3. 텍스트 표시 (라벨)

• 막대 내부에 텍스트 입력 시 퍼센트 등 표시 가능

<div class="progress">
  <div class="progress-bar" style="width:70%">70%</div>
</div>

 

---

4. 색상 변경

• `.bg-primary` (기본 파랑)
• `.bg-success`, `.bg-info`, `.bg-warning`, `.bg-danger`, `.bg-dark`, `.bg-light`, `.bg-secondary` 등 활용

<div class="progress">
  <div class="progress-bar bg-success" style="width:50%"></div>
</div>

 

---

5. 줄무늬(스트라이프) 효과

• `.progress-bar-striped` 추가

<div class="progress">
  <div class="progress-bar progress-bar-striped" style="width:60%"></div>
</div>

 

---

6. 애니메이션 효과

• `.progress-bar-animated` 추가
• `.progress-bar-striped`와 함께 사용해야 자연스럽게 동작

<div class="progress">
  <div class="progress-bar progress-bar-striped progress-bar-animated" style="width:40%"></div>
</div>

 

실제로는 움직임

---

7. 여러 진행 바 병렬 출력 (Stacked)

• 하나의 `.progress` 안에 여러 `.progress-bar` 삽입
• 각각 다른 색상과 비율로 설정 가능

<div class="progress">
  <div class="progress-bar bg-success" style="width:40%">Free Space</div>
  <div class="progress-bar bg-warning" style="width:10%">Warning</div>
  <div class="progress-bar bg-danger" style="width:20%">Danger</div>
</div>