목차
- Progress Bar 예제 - 기본/크기/라벨/색깔/줄무늬
- Progress Bar (기본)
- Progress Bar Height (크기)
- Progress Bar Label (라벨)
- Progress Bar Color (색깔)
- Progress Bar Strip (줄무늬)
- Progress Bar Animation (애니효과)
- 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와 동일