부트스트랩 Bootstrap 3 구성요소 Progress bars

Progress bars(진행바)는 작업의 흐름이나 액셕의 진행을 나타낼때 사용합니다.

CSS3 의 트렌지션과 에니메이션을 사용하기 때문에 IE9 이하나 구버젼의 파이어폭스에서는 지원되지 않습니다.

또 오페라 12도 애니메이션을 지원하지 않는다고 하네요.

기본예제는 아래와 같습니다.

.progress 클래스로 진행바의 영역을 감싸고 진행바의 상태를 표시하기 위해 .pregress-bar 클래스를 사용합니다.

일관된 스타일을 유지하기 위해 sucess, info, warning, danger 을 사용해서 색상별 진행바도 지원합니다.

또한 그라디언트를 이용해서 좀더 효과를 줄수도 있습니다. 하지만 IE8 에서는 작동하지 않습니다.

간단하게 위에서 말한 .pregress 클래스에 .pregress-striped 클래스만 추가해주면 됩니다.

움직이는 진행바는 .active 라는 클래스를 추가적으로 부여하면 됩니다.

진행바를 단계 단계 쌓으면서 영역을 지정할 수도 있습니다.

진행바의 길이는 width: 값으로 보여집니다. 각각의 영역을 잡으려면 이걸 명시적으로 표시하면 됩니다.

진행바는 그닥 어려운것이 없습니다. 클래스도 많지 않구요.