• Q&A
  • 회원가입
  • 로그인

[basic] BS3 - Progress Bar (BS진행바 = BS진행상태표시 = BS진도바 = BS프로그레스바) - IE 10 이상

※ 주의: 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  클래스 : 애니효과

 


오늘도 즐겁게 열심히 .....

찾아주셔서 감사합니다. Since 2012