Bootstrap 5 진행 바

기본 진행조

진행조는 사용자가 특정 프로세스에서의 진행을 표시하는 데 사용될 수 있습니다。

기본 진행조를 생성하려면 .progress 클래스를 컨테이너 요소에 추가하고 .progress-bar 클래스를 자식 요소에 추가하여 설정하십시오. CSS width 속성을 사용하여 진행조의 너비를 설정하십시오：

예제

<div class="progress">
  <div class="progress-bar" style="width:70%"></div>
</div>

직접 시험해 보세요

진행조 높이

진행조의 높이는 기본적으로 1rem（일반적으로 16px）。CSS를 사용하여 설정하십시오。 height 속성을 사용하여 변경할 수 있습니다.

ヒント：주의하세요, 진행 컨테이너와 진행조의 높이를 같게 설정해야 합니다：

예제

<div class="progress" style="height:20px">
  <div class="progress-bar" style="width:40%;height:20px"></div>
</div>

직접 시험해 보세요

진행조 태그

진행조 내에 텍스트를 추가하여 보이는 퍼센트를 표시할 수 있습니다：

예제

<div class="progress">
  <div class="progress-bar" style="width:70%">70%</div>
</div>

직접 시험해 보세요

컬러 진행조

기본적으로, 진행条的 색상은 파란색(주요)입니다. 어떤 컨텍스트 배경 클래스를 사용하여 색상을 변경할 수 있습니다：

예제

<!-- Blue -->
<div class="progress">
  <div class="progress-bar" style="width:10%"></div>
</div>
<!-- Green -->
<div class="progress">
  <div class="progress-bar bg-success" style="width:20%"></div>
</div>
<!-- Turquoise -->
<div class="progress">
  <div class="progress-bar bg-info" style="width:30%"></div>
</div>
<!-- Orange -->
<div class="progress">
   <div class="progress-bar bg-warning" style="width:40%"></div>
</div>
<!-- Red -->
<div class="progress">
  <div class="progress-bar bg-danger" style="width:50%"></div>
</div>
<!-- White -->
<div class="progress border">
  <div class="progress-bar bg-white" style="width:60%"></div>
</div>
<!-- 회색 -->
<div class="progress">
  <div class="progress-bar bg-secondary" style="width:70%"></div>
</div>
<!-- 밝은 회색 -->
<div class="progress border">
  <div class="progress-bar bg-light" style="width:80%"></div>
</div>
<!-- 어둡은 회색 -->
<div class="progress">
  <div class="progress-bar bg-dark" style="width:90%"></div>
</div>

직접 시험해 보세요

스트립 프로그래스바

사용하세요 .progress-bar-striped 스트립을 추가하기 위한 클래스:

예제

<div class="progress">
  <div class="progress-bar progress-bar-striped" style="width:40%"></div>
</div>

직접 시험해 보세요

프로그래스바 애니메이션

추가하세요 .progress-bar-animated 프로그래스바 애니메이션을 만들기 위한 클래스:

예제

<div class="progress-bar progress-bar-striped progress-bar-animated" style="width:40%"></div>

직접 시험해 보세요

여러 개의 프로그래스바

프로그래스바는 쌓일 수 있습니다:

예제

<div class="progress">
  <div class="progress-bar bg-success" style="width:40%">
    자유 공간
  </div>
  <div class="progress-bar bg-warning" style="width:10%">
    경고
  </div>
  <div class="progress-bar bg-danger" style="width:20%">
    위험
  </div>
</div>

직접 시험해 보세요