[bootstrap] 부트스트랩 – 프로그레스 바(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% Complete</span>
</div>
</div>

 

부트스트랩에서 프로그래스 바를 나타내는 기본 소스는 위와 같습니다.

색상 선택자를 추가하면 여러가지 색상을 나타낼 수 있습니다.

.progress-bar-success
.progress-bar-info
.progress-bar-warning
.progress-bar-danger

 

다음은 사선 줄무늬를 나타내는 선택자입니다.

.progress-bar-striped

 

줄무늬가 애니매이션 되는 모습을 보려면 .active 선택자를 추가하면 됩니다.

<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 class=”progress“>
<div class=”progress-bar progress-bar-success” style=”width: 35%“>
<span class=”sr-only“>35% Complete (success)</span>
</div>
<div class=”progress-bar progress-bar-warning progress-bar-striped” style=”width: 20%“>
<span class=”sr-only“>20% Complete (warning)</span>
</div>
<div class=”progress-bar progress-bar-danger” style=”width: 10%“>
<span class=”sr-only“>10% Complete (danger)</span>
</div>
</div>