진전

누적 막대, 애니메이션 배경 및 텍스트 레이블을 지원하는 Bootstrap 사용자 정의 진행률 표시줄 사용에 대한 설명서 및 예제.

이 페이지에서

작동 방식

Progress 구성 요소는 두 개의 HTML 요소, 너비를 설정하는 일부 CSS 및 몇 가지 속성으로 빌드됩니다. HTML5 <progress>요소 를 사용하지 않으므로 진행률 표시줄을 쌓고 애니메이션을 적용하고 그 위에 텍스트 레이블을 배치할 수 있습니다.

.progress진행률 표시줄의 최대 값을 나타내는 래퍼로 사용합니다 .
내부 .progress-bar를 사용하여 지금까지의 진행 상황을 나타냅니다.
.progress-bar너비를 설정하려면 인라인 스타일, 유틸리티 클래스 또는 사용자 정의 CSS가 필요합니다 .
또한 액세스할 수 있도록 .progress-bar하려면 일부 role및 aria속성이 필요합니다.

이를 모두 합치면 다음과 같은 예가 있습니다.

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>

부트스트랩은 너비를 설정하기 위한 몇 가지 유틸리티를 제공합니다 . 필요에 따라 진행 상황을 빠르게 구성하는 데 도움이 될 수 있습니다.

<div class="progress">
  <div class="progress-bar w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>

라벨

에 텍스트를 배치하여 진행률 표시줄에 레이블을 추가합니다 .progress-bar.

25%

<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
</div>

키

에 값만 설정 하므로 해당 height값 .progress을 변경하면 내부 .progress-bar가 그에 따라 자동으로 크기가 조정됩니다.

<div class="progress" style="height: 1px;">
  <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress" style="height: 20px;">
  <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>

배경

백그라운드 유틸리티 클래스를 사용하여 개별 진행률 표시줄의 모양을 변경합니다.

<div class="progress">
  <div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>

여러 막대

필요한 경우 진행률 구성 요소에 여러 진행률 표시줄을 포함합니다.

<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="progress-bar bg-success" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="progress-bar bg-info" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
</div>

줄무늬

진행률 표시줄의 배경색 위에 CSS 그라디언트를 통해 줄무늬를 적용 .progress-bar-striped하려면 아무 항목에 추가 합니다..progress-bar

<div class="progress">
  <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>

애니메이션 줄무늬

줄무늬 그라데이션도 애니메이션할 수 있습니다. CSS3 애니메이션을 통해 줄무늬를 오른쪽에서 왼쪽으로 애니메이션하려면 에 추가하십시오 .progress-bar-animated..progress-bar

<div class="progress">
  <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
</div>

사스

변수

$progress-height:                   1rem;
$progress-font-size:                $font-size-base * .75;
$progress-bg:                       $gray-200;
$progress-border-radius:            $border-radius;
$progress-box-shadow:               $box-shadow-inset;
$progress-bar-color:                $white;
$progress-bar-bg:                   $primary;
$progress-bar-animation-timing:     1s linear infinite;
$progress-bar-transition:           width .6s ease;

키프레임

에 대한 CSS 애니메이션을 만드는 데 사용됩니다 .progress-bar-animated. 에 포함됩니다 scss/_progress-bar.scss.

@if $enable-transitions {
  @keyframes progress-bar-stripes {
    0% { background-position-x: $progress-height; }
  }
}