웹 페이지에서는 시스템,로드 상태 등과 같은 진행률 막대 효과가 종종 나타납니다. 진행률 막대 구성 요소는 CSS3의 전환 및 애니메이션 속성을 사용하여 특수 효과를 완료합니다. 이러한 특수 효과는 IE9 및 IE9 및 Firefox 버전에서 지원되지 않으며 Opera 12는 애니메이션 속성을 지원하지 않습니다.
진행률 표시 줄은 다른 독립적 인 구성 요소와 같습니다. 개발자는 필요에 따라 해당 버전을 선택할 수 있습니다.
덜 : Progress-bars.less
SASS : _PROGRESS-BARS.SCSS
기본 진행률 바
구현 원칙 :
두 개의 컨테이너가 필요합니다. 외부 컨테이너는 클래스 이름을 사용하고 프로그램은 클래스 이름을 사용합니다 .progress-bar; Progress Bar 컨테이너의 배경색, 높이, 간격 등을 설정하는 데 사용되는 경우; 그리고 .Progress-bar는 진행 방향, 배경색 및 진행률 표시 줄의 과도한 효과를 설정합니다. 다음은 CSS 소스 코드입니다.
진행 {높이 : 20px; 마진-바닥 : 20px; 오버플로 : 숨겨진; 배경색 : #f5f5f5; Border-Radius : 4px; -webkit-box-shadow : 삽입 0 1px 2px rgba (0, 0, 0, .1); Box-Shadow : inset 0 1px 2px rgba (0, 0, 0, 1); {float : 왼쪽; 너비 : 0; 높이 : 100%; 글꼴 크기 : 12px; 선-높이 : 20px; 색상 : #ffff; 텍스트-알림 : 중심; 배경 색 : #428bca; -webkit-box-shadow : 삽입 0 -1px 0 RGBA (0, 0, 0, .15); Box-Shadow : Inset 0 -1px 0, 0, 0, .15);-WebKit-Transition : 너비 .6S 편의; 전환 : 너비 .6S 편의;}예:
<div> <div role = "progressbar"aria-valuenow = "30"aria-valuemin = "0"aria-valuemax = "100"> <span> 30%</div> </div>
역할 속성 기능 : 검색 엔진 에이 DIV의 기능이 진행 상황이라고 말합니다.
ARIA-VALUENOW =”30”속성 함수 : 현재 진행률 막대 진행은 40%입니다.
aria-valuemin =”0”속성 함수 : 진행률 막대의 최소값은 0%입니다.
aria-valuemax =”100”속성 함수 : 진행률 막대의 최대 값은 100%입니다.
진행률 표시 줄 구성 요소에서 .SR 전용 클래스 세트로 <Span> 태그를 제거하여 현재 진행 상황을 표시 할 수 있습니다.
<div> <div role = "progressbar"aria-valuenow = "40"aria-valuemin = "0"aria-valuemax = "100"> 40%</div> </div>
다채로운 진보 바
컬러 진행 상황 막대는 경고 진행 막대와 동일합니다. 사용자에게 더 나은 경험을 제공하기 위해, 주로 다음 4 가지 유형을 포함하여 다른 상태에 따라 다른 진행률 바 색상도 구성됩니다.
Progress-Bar-Info : 정보 진행 막대 인 Blue를 나타냅니다
Progress-Bar-Success : 성공 진행 막대, 녹색을 나타냅니다
Progress-Bar-Warning : 경고 진행 막대 인 Yellow를 나타냅니다
Progress-Bar Danger : 오류 진행 막대, 빨간색을 나타냅니다
CSS 소스 코드 :
.progress-bar-success {back사용 방법 :
해당 클래스 이름을 기본 진행률 표시 줄에 추가하십시오.
예:
<H1> 화려한 진보 바 </h1> <div> <div 역할 = "ProgressBar"aria-valuenow = "25"aria-valuemin = "0"aria-valuemax = "100"> 25%</div> </div> <div role = "progressbar"aria-valuemax = "40" aria-valuemax = "0"> 40%</div> </div> </div> <div> <div> <div 역할 = "progressbar"aria-valuenow = "25"aria-valuemin = "0"aria-valuemax = "100"> 80%</div> </div> <div> <div brohen = "progressbar"aria-valuenow = "40" "40" "40" "40. aria-valuemin = "0"> 60%</div> </div>
효과는 다음과 같습니다.
줄무늬 진행률 바
줄무늬 진행 막대는 CSS3의 선형 구배를 사용합니다. 사진을 사용하지 않습니다. 줄무늬 진행 막대를 사용하면 클래스 이름 "Progress-Striped"를 진행 막대의 컨테이너에 추가하면됩니다. 진전. 색상 진행과 같이 진행 스트라이프를 만들고 색상 효과가 있으려면 해당 색상 클래스 이름을 진행 막대에 추가하면됩니다.
다음은 .progress 스트립 스타일 소스 코드입니다.
.progress-striped .progress-bar {배경 이미지 : -webkit-linear-gradient (45deg, rgba (255, 255, 255, .15) 25%, 투명 25%, 투명 50%, RGBA (255, 255, 255, .15) 50%, RGBA (255, 255, .15%, 255, 255, .15%, 255, 255, 255, 255, 255, RGBA). 투명한 75%, 투명); 배경 이미지 : 선형 등급 (45deg, RGBA (255, 255, 255, .15) 25%, 투명 25%, 투명 25%, 투명 50%, RGBA (255, 255, 255, .15) 50%, RGBA (255, 255, 255, .15) 75%, 투자물, 투자군. 투명); 배경 크기 : 40px 40px;}줄무늬 진행 상황에 해당하는 각 상태도 색상이 다릅니다.
.progress-striped .Progress-bar-success {배경 이미지 : -webkit-linear-gradient (45deg, rgba (255, 255, 255, .15) 25%, 투명 25%, 투명 50%, RGBA (255, 255, 255, .15) 50%, RGBA (255, 255, 255, .15). 75%, 투명한 75%, 투명); 배경 이미지 : 선형 등급 (45deg, RGBA (255, 255, 255, .15) 25%, 투명 25%, 투명 25%, .15) 25%, 투명한 50%, RGBA (255, 255, 255, .15) 50%, rgba (255,.). 50%, RGBA (255, 255, 255, .15) 50%, RGBA (255, 255, 255, .15) 75%, 투명한 75%, 투명); 배경 이미지 : 선형-그라디언트 (45deg, RGBA, RGBA (255, 255, 255, .15) 25%, Transparent 50%, rgba (255,). 50%, RGBA (255, 255, 255, .15) 75%, 투명한 75%, 투명);}. 진행 강력한 .progress-bar-barning {배경 이미지 : -webkit-linear-gradient (45deg, RGBA (255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255. 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 25%, 투명 25%, 투명 50%, RGBA (255, 255, 255, .15) 50%, rgba (255, 255, .15) 75%, 투자물 75%, RGBA. 투명); 배경 이미지 : 선형 등급 (45deg, RGBA (255, 255, 255, .15) 25%, 투명 25%, 투명 50%, RGBA (255, 255, 255, .15) 50%, RGBA (255, 255, 255, .15) 75%, RGBA (255, 255, 15). 75%, 투명);}. 진행 스트리핑. 프로그램-배수 {배경-이미지 : -webkit-linear-gradient (45deg, RGBA (255, 255, 255, .15) 25%, 투명 25%, 투명 50%, RGBA (255, 255, .15) 50%, RGBA (255, 255,. 투명한 75%, 투명); 배경 이미지 : 선형 등급 (45deg, RGBA (255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 15, 15, 255, 255, 15, 255, 투명 25%, 투명한 50%, RGBA (255, 255, 255, .15) 50%, RGBA (255, 255, 255, .15) 75%, 투명 75%, 투명);}줄무늬 진행 막대의 사용을 살펴 보겠습니다.
<h1> 스트라이프 진행률 바 </h1> <div> <div role = "progressbar"aria-valuenow = "25"aria-valuemin = "0"aria-valuemax = "100"> 25%</div> </div> <div role = "progressbar"aria-valuemax = "40" aria-valuemax = "0"> 40%</div> </div> </div> <div> <div> <div 역할 = "progressbar"aria-valuenow = "25"aria-valuemin = "0"aria-valuemax = "100"> 80%</div> </div> <div> <div brohen = "progressbar"aria-valuenow = "40" "40" "40" "40. aria-valuemin = "0"> 60%</div> </div>
다이내믹 스트라이프 진행률 바
Dynamic Stripe Progress Bar는 진행률 표시 줄에 따라 실현 될 수 있으며 .progress 및 .progress-striped 두 클래스, 클래스 이름을 추가합니다.
구현 원칙은 주로 CSS3의 애니메이션을 통해 달성됩니다. 먼저, 진행중기-스트립 애니메이션은 @keyframes를 통해 만들어집니다. 이 애니메이션은 주로 한 가지를 수행하는데, 즉 배경 이미지의 위치, 즉 배경 위치의 값을 변경하는 것입니다. 줄무늬 진행률 막대는 CSS3의 선형 구배를 통해 만들어지고 선형 그레이드는 배경에 해당하는 배경 그림을 구현합니다.
CSS 소스 코드는 다음과 같습니다.
@-webkit-keyframes progress-bar-stripes {from {background-position : 40px 0;}로 {배경 위치 : 0 0;}}@keyframes progress-bar-stripes {{background-fosition : 40px 0;} ~ {background-position : 0 0;}}@keyframes는 단지 애니메이션 효과를 만듭니다. 진행률 표시 줄이 실제로 움직이기를 원한다면 @keyframes에서 생성 한 애니메이션 "Progress-Bar-Stripes"를 특정 방식으로 호출하고 이벤트를 통해 애니메이션이 적용되도록 트리거해야합니다. 부트 스트랩 프레임 워크에서 클래스 이름 "Active"를 진행 막대 컨테이너 "진행 상황"에 추가하고 문서로드를 완료하고 "Progress-Bar-Stripes"애니메이션을 만질 수 있도록하십시오.
통화 애니메이션의 해당 스타일 코드는 다음과 같습니다.
.progress.Active .Progress-Bar {-webkit-animation : Progress-Bar-Stripes 2S 선형 무한; 애니메이션 : 진행-바 스트립 2S 선형 무한;}}예:
<h1> 동적 스트라이프 진행률 바 </h1> <div> <div role = "ProgressBar"aria-valuenow = "25"aria-valuemin = "0"aria-valuemax = "100"> 25%</div> <div> <div> <div> <divbar "Aria-Valuemax ="40 ""40 "" ""100 " aria-valuemax = "0"> 40%</div> </div> </div> <div> <div> <div 역할 = "progressbar"aria-valuenow = "25"aria-valuemin = "0"aria-valuemax = "100"> 80%</div> </div> <div> <div brohen = "progressbar"aria-valuenow = "40" "40" "40" "40. aria-valuemin = "0"> 60%</div> </div>
효과는 다음과 같습니다 (웹 페이지의 결과에서 직접 나오는 그림이므로 여기서는 동적 효과를 볼 수 없습니다).
캐스케이드 진행률 바 :
스태킹 진행 상황은 양립 할 수없는 진행률 막대를 모아서 수평으로 배열 할 수 있습니다.
예:
<div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div>
컬러 진행 막대를 쌓는 것 외에도 스트라이프 진행 막대를 쌓거나 색상 진행 막대가있는 스트라이프 진행 막대를 믹스 앤 스택으로 쌓을 수도 있습니다. 해당 진행 막대를 "진행"컨테이너에만 추가하면됩니다. 또한 스택 진행 막대의 합은 100%보다 클 수 없습니다.
예를 살펴 보겠습니다.
<div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> </div> <div> </div> </div> <div> </div> </div>
이것은 Bootstrap Progress Bar 구성 요소 지식에 대한 자세한 설명입니다. 나는 그것이 모두에게 도움이되기를 바랍니다!