※ 주의: CSS3 (트랜지션, 애니메이션) 효과 : IE9이하, Fierfox구버전, Opera12이하 경우 지원 X
Progress Bar : 작업진행상태 표시.
Progress Bar 기본
<div class="progress ">
<div class="progress-bar " role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
<span class="sr-only"> 60% 완성</span>
</div>
</div>
Progress Bar 라벨 - 숫자표시
.sr-only 클래스 적용된 <span> 태그 제거. (위 빨간색 소스 삭제)
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
60% 완성
</div>
</div>
Progress Bar 최소너비
낮은 진행율에서도 라벨 텍스트 읽을 수 있도록, 진행바에 min-width 스타일 추가.
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width : 2em;">0%</div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="min-width : 2em; width: 2%;">2%</div>
</div>
Progress Bar 색깔
진행바는 일관된 스타일 위해 Button, Alert 클래스와 같은 색깔 패턴 사용.
.progress-bar-success (녹색)
.progress-bar-info (파란색)
.progress-bar-warning (주황색)
.progress-bar-danger (빨간색)
<div class="progress">
<div class="progress-bar progress-bar-success " role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
<span class="sr-only">40% Complete (success)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info " role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
<span class="sr-only">20% Complete</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning " role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
<span class="sr-only">60% Complete (warning)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger " role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
<span class="sr-only">80% Complete (danger)</span>
</div>
</div>
Progress Bar 줄무늬
.progress-bar-striped 클래스 추가.
<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-striped " role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
<span class="sr-only">40% Complete (success)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info progress-bar-striped " role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
<span class="sr-only">20% Complete</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning progress-bar-striped " role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
<span class="sr-only">60% Complete (warning)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger progress-bar-striped " role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
<span class="sr-only">80% Complete (danger)</span>
</div>
</div>
Progress Bar 줄무늬 애니효과
.active 와 .progress-bar-striped 클래스 추가. (줄무늬가 오른쪽에서 왼쪽으로 이동하는 효과)
<div class="progress">
<div class="progress-bar progress-bar-striped active " role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
<span class="sr-only">45% Complete</span>
</div>
</div>
Progress Bar 여러진행상태
.progress 안에 여러 개의 진행바 추가.
<div class="progress">
<div class="progress-bar progress-bar-success " role="progressbar" style="width:40 %">
HTML
</div>
<div class="progress-bar progress-bar-warning " role="progressbar" style="width:10 %">
CSS
</div>
<div class="progress-bar progress-bar-danger " role="progressbar" style="width:20 %">
JS
</div>
Progress Bar 종합 - 크기/라벨/색깔/줄무늬/애니효과
<div class="progress ">
<div class="progress-bar progress-bar-success progress-bar-striped active " role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70% ">
<span class="sr-only">70% </span>
</div>
</div>
[색깔 = 색상 = 컬러]
.progress-bar-success 클래스 : 연두색
.progress-bar-info 클래스 : 하늘색
.progress-bar-warning 클래스 : 귤색
.progress-bar-danger 클래스 :빨간색
.progress-bar-striped 클래스 : 빗살무늬
[애니효과]
.active 클래스 : 애니효과
