Bootstrap 3.3.7 | Bootstrap의 입력 구성 요소 | 프로그래스바(progress-bar)

Tags:

전체 진행 상황 등을 표시하는데 사용되는 것이, 진행률 표시 줄이다. 가로 줄에 진행 정도에 따라 막대가 뻗어나가는 것이다. 파일 복사 등, 모든 장면에서 사용되고 있다.

이 진행률 표시 줄도 Bootstrap에는 원래의 인터페이스로 사용할 수 있다. 이것은 아래와 같은 형태로 작성한다.

<div class="progress">
    <div class="progressbar" role="progressbar" style="width : 가로 설정">
        줄에 표시할 텍스트
    </ div>
</ div>

프로그래스바는 2개의 <div>에 의해 구축된다. 외부 <div>에 진행률이 전체의 배경이 되는 것으로 class="progress"를 지정해야 한다.

그리고 내부 <div>이 줄 부분이 되는 것으로, 이것은 class="progressbar", role="progressbar"를 지정해야 한다. 내부 바의 길이는 width 스타일로 지정한다. 예를 들어, style="width:50%;"와 같이 지정하면, 전체의 절반 길이의 막대가 표시된다.

진행률 표시줄은 바의 표시에 관한 클래스가 몇개 준비되어 있다. 먼저 바의 표시 색에 관한 것이다.

바 색상 설정

  • progress-bar-default
  • progress-bar-success
  • progress-bar-info
  • progress-bar-warning
  • progress-bar-danger

“progress-bar-” 뒤에 붙어있는 단어는 어디선가 본 적이 있을 것이다. 버튼의 스타일 등으로 지금까지 사용한 적이 있었다. progress-bar-xxxx와 같이 표시하는 용도에 따라 단어를 붙이면, 바의 색이 그에 맞게 변경된다.

줄무늬 표시

  • progress-bar-striped

또 하나, 바 스트라이프(줄무늬) 표시(대각선이 들어간 것)를 하기 위한 클래스도 준비되어 있다. class 속성에 progress-bar-striped를 추가하여 바에 줄무늬 표시할 수 있다.

추가적으로 class 속성에 “active"를 추가하여, 애니메이션으로 줄무늬 표시할 수 있다.

그럼 이것도 사용 예제를 아래에 올려 두었다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
 
    <title>Bootstrap</title>
 
    <script src="./js/jquery-3.1.1.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
     
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/bootstrap-theme.min.css">
 
</head>
<body >
     
<div class="container">
             
<div class="row">
    <div class="col-md-12">
         
        <div class="page-header">
            <h1>컨텐츠 표시</h1>
            <h2>Progress Bar</h2>
        </div>
         
        <div class="progress">
            <div class="progress-bar" role="progressbar"
                style="width: 35%;">
                35%
            </div>
        </div>
        <div class="progress">
            <div class="progress-bar progress-bar-success" role="progressbar" style="width: 65%;">
                65%
            </div>
        </div>
        <div class="progress">
            <div class="progress-bar progress-bar-danger progress-bar-striped active"
            role="progressbar" style="width: 95%;">
                95%
            </div>
        </div>
         
    </div>
</div>
     
</div>
 
</body>
</html>

여기에서는 3개의 진행률 표시 줄을 표시하고 있다. 중간의 것은 그린에 아래의 것은 빨간색으로 표시되고, 아래 하단 바는 애니메이션으로 줄무늬 표시한다.