[basic] BS5 - Progress Bar (BS진행바 = BS진도바 = BS프로그레스바)

1. Progress Bar 예제 - 기본/크기/라벨/색깔/줄무늬
2. Progress Bar (기본)
3. Progress Bar Height (크기)
4. Progress Bar Label (라벨)
5. Progress Bar Color (색깔)
6. Progress Bar Strip (줄무늬)
7. Progress Bar Animation (애니효과)
8. Progress Bar Multi (멀티)

※ BS4와 동일

Progress Bar 예제 - 기본/크기/라벨/색깔/줄무늬 

 

<div class="progress" style="height:20px">

  <div class="progress-bar bg-warning progress-bar-striped progress-bar-animated" style="width:60%;height:20px">60%</div>

</div>

 

결과보기

Progress Bar (기본)

 

<div class="progress">

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

</div>

 

결과보기

※ BS4와 동일

Progress Bar Height (크기)

※ 높이 기본값: 1rem (16px)

 

<div class="progress" style="height:20px">

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

</div>

 

 

결과보기

※ BS4와 동일

Progress Bar Label (라벨)

 

<div class="progress">

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

</div>

 

결과보기

※ BS4와 동일 

Progress Bar Color (색깔)

 

<!-- 파란색 -->

<div class="progress">

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

</div>

<!-- 녹색 -->

<div class="progress">

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

</div>

<!-- 청록색 (하늘색) -->

<div class="progress">

  <div class="progress-bar bg-info" style="width:30%"></div>

</div>

<!-- 오렌지색 -->

<div class="progress">

   <div class="progress-bar bg-warning" style="width:40%"></div>

</div>

<!-- 빨간색 -->

<div class="progress">

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

</div>

<!-- 흰색 -->

<div class="progress border">

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

</div>

<!-- 회색 -->

<div class="progress">

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

</div>

<!-- 연회색 -->

<div class="progress border">

  <div class="progress-bar bg-light" style="width:80%"></div>

</div>

<!-- 진회색 -->

<div class="progress">

  <div class="progress-bar bg-dark" style="width:90%"></div>

</div>

 

결과보기

※ BS4와 동일

Progress Bar Strip (줄무늬)

 

<div class="progress">

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

</div>

 

결과보기

---

PS. 

 

.progress-bar-striped {

  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);

  background-size: 1rem 1rem;

} 

 

※ BS4와 동일

Progress Bar Animation (애니효과)

 

<div class="progress">

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

</div>

 

결과보기

---

PS. 

 

.progress-bar-animated {

  -webkit-animation: 1s linear infinite progress-bar-stripes;

  animation: 1s linear infinite progress-bar-stripes;

}

@media (prefers-reduced-motion: reduce) {

  .progress-bar-animated {

    -webkit-animation: none;

    animation: none;

  }

} 

 

※ BS4와 동일 (cf. BS3 경우, .active 클래스 이용)

Progress Bar Multi (멀티)

 

<div class="progress">

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

  <div class="progress-bar bg-warning" style="width:10%">Warning</div>

  <div class="progress-bar bg-danger" style="width:20%">Danger</div>

</div>

 

결과보기

※ BS4와 동일