[basic] BS4 - 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 (멀티)

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>

 

Progress Bar Height (크기)

 

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

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

</div>

 

Progress Bar Label (라벨)

 

<div class="progress">

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

</div>

 

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>

 

결과보기

Progress Bar Strip (줄무늬)

 

<div class="progress">

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

</div>

 

Progress Bar Animation (애니효과)

 

<div class="progress">

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

</div>

 

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>

 

결과보기