Bootstrap Progress Bars

프로그레스 바(Progress Bar, 진행률 표시 막대)를 사용하여 사용자가 프로세스를 얼마나 진행하고 있는지 보여줄 수 있습니다.

Bootstrap은 여러 유형의 프로그레스 바를 제공합니다.

기본 프로그레스 바를 만들기 위해, <div> 요소에 .progress 클래스를 추가합니다.
Bootstrap의 기본 프로그레스 바는 다음과 같습니다.

참고:
Internet Explorer 9 및 이전 버전에서는 프로그레스 바가 지원되지 않습니다 (CSS3 트랜지션 및 애니메이션을 사용하여 일부 효과를 얻기 때문에).

참고:
스크린 리더를 사용하는 사람들의 접근성을 높이려면 aria- * 속성을 포함해야 합니다.

프로그레스 바에서 .sr-only 클래스를 제거하여 백분율을 표시합니다:

컨텍스추얼 클래스는 “색상을 통한 의미”를 제공하는 데 사용됩니다.

프로그레스 바와 함께 사용할 수 있는 컨텍스트추얼 클래스는 다음과 같습니다.

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

다음 예제는 다양한 컨텍스추얼 클래스를 사용하여 프로그레스 바를 만드는 방법을 보여줍니다.

프로그레스 바에 스트라이프(줄무늬)를 추가하기 위해 .progress-bar-striped 클래스를 추가합니다.

프로그레스 바에 애니메이션을 적용하기 위해 .active 클래스를 추가합니다.

프로그레스 바는 또한 누적될 수 있습니다.

여러 개의 프로그레스 바를 동일한 ><div class="progress">에 배치하여 누적 프로그레스 바를 만듭니다.