Bootstrap 진행률 표시줄 component_javascript 기술에 대한 자세한 지식

웹 페이지에서는 이등분 시스템, 로딩 상태 등과 같은 진행률 표시줄 효과가 자주 표시됩니다. 진행률 표시줄 구성 요소는 CSS3의 전환 및 애니메이션 속성을 사용하여 일부 특수 효과를 IE9 및 IE9에 적용합니다. 이하 버전에서는 Firefox 이전 버전에서는 지원되지 않으며 Opera 12에서는 애니메이션 속성을 지원하지 않습니다.

진행률 표시줄은 다른 독립 구성요소와 동일합니다. 개발자는 필요에 따라 해당 버전을 선택할 수 있습니다.

LESS: 진행률 표시줄 없음

SASS: _progress-bars.scss

기본 진행 표시줄

구현 원칙:

두 개의 컨테이너가 필요합니다. 외부 컨테이너는 클래스 이름 .progress를 사용하고 하위 컨테이너는 클래스 이름 .progress-bar를 사용합니다. 진행률 표시줄 컨테이너의 배경색과 높이를 설정하는 데 사용됩니다. 컨테이너 등의 간격 및 .progress-bar는 진행률 표시줄의 진행 방향, 배경색 및 전환 효과를 설정합니다. 다음은 CSS 소스 코드입니다.

progress {
height: 20px;
margin-bottom: 20px;
overflow: hidden;
background-color: #f5f5f5;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
}

.progress-bar {
float: left;
width: 0;
height: 100%;
font-size: 12px;
line-height: 20px;
color: #fff;
text-align: center;
background-color: #428bca;
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
-webkit-transition: width .6s ease;
transition: width .6s ease;
}

예:

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

역할 속성: 이 div가 진행률 표시줄로 작동함을 검색 엔진에 알립니다.

aria-valuenow="30" 속성 함수: 현재 진행률 표시줄은 40%입니다.

aria-valuemin="0" 속성 함수: 진행률 표시줄의 최소값은 0%입니다.

aria-valuemax="100" 속성 함수: 진행률 표시줄의 최대값은 100%입니다.

진행률 표시줄 구성 요소에서 .sr 전용 클래스가 포함된 45a2772a6b6107b401db3c9b82c049c2 태그를 제거하고 현재 진행 상황을 표시할 수 있습니다.

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

색상 진행률 표시줄

색상 진행률 표시줄은 경고 진행률 표시줄과 동일합니다. 사용자에게 더 나은 경험을 제공하기 위해 주로 다음 네 가지 유형을 포함하여 다양한 진행률 표시줄 색상이 구성됩니다.

progress-bar-info: 정보 진행률 표시줄을 나타냅니다(파란색)

progress-bar-success: 성공적인 진행률 표시줄(녹색)을 나타냅니다.

progress-bar-warning: 경고 진행률 표시줄을 나타냅니다(노란색).

progress-bar-danger: 오류 진행률 표시줄을 나타냄(빨간색)

CSS 소스 코드:

.progress-bar-success {
background-color: #5cb85c;
}
.progress-bar-info {
background-color: #5bc0de;
}
.progress-bar-warning {
background-color: #f0ad4e;
}
.progress-bar-danger {
background-color: #d9534f;
}

사용방법:

기본 진행 표시줄에 해당 클래스 이름을 추가하기만 하면 됩니다

예:

<h1>彩色进度条</h1>
<div class="progress">
<div class="progress-bar progress-bar-success" style="width:25%;" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info" style="width:40%;" role="progressbar" aria-valuenow="40" aria-valuemax="100" aria-valuemin="0">40%</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning" style="width:80%;" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">80%</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger" style="width:60%;" role="progressbar" aria-valuenow="40" aria-valuemax="100" aria-valuemin="0">60%</div>
</div>

효과는 다음과 같습니다.

줄무늬 진행률 표시줄

줄무늬 진행률 표시줄은 그림을 사용하지 않고 CSS3의 선형 그래디언트를 사용하여 구현됩니다. 줄무늬 진행률 표시줄을 사용하려면 원하는 경우 진행률 표시줄의 Container.progress에 "progress-striped"라는 클래스 이름을 추가하면 됩니다. 색상화할 진행 줄무늬 진행률은 동일합니다. 색상 효과도 마찬가지입니다. 진행률 표시줄에 해당 색상 클래스 이름

을 추가하기만 하면 됩니다.

다음은 .progress-striped 스타일 소스코드입니다.

.progress-striped .progress-bar {
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
background-image:linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
background-size: 40px 40px;
}

스트라이프 진행에 해당하는 상태마다 색상도 다릅니다

.progress-striped .progress-bar-success {
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
background-image:linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
}
.progress-striped .progress-bar-info {
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
background-image:linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
}
.progress-striped .progress-bar-warning {
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
background-image:linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
}
.progress-striped .progress-bar-danger {
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
background-image:linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
}

줄무늬 진행률 표시줄 적용을 살펴보겠습니다.

<h1>条纹进度条</h1>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-success" style="width:25%;" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
</div>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-info" style="width:40%;" role="progressbar" aria-valuenow="40" aria-valuemax="100" aria-valuemin="0">40%</div>
</div>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-warning" style="width:80%;" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">80%</div>
</div>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-danger" style="width:60%;" role="progressbar" aria-valuenow="40" aria-valuemax="100" aria-valuemin="0">60%</div>
</div>

동적 줄무늬 진행률 표시줄

진행률 표시줄 .progress와 .progress-striped의 두 클래스를 기반으로 클래스 이름 .active를 추가하면 동적 줄무늬 진행률 표시줄을 구현할 수 있습니다.

구현 원리는 주로 CSS3 애니메이션을 통해 이루어집니다. 먼저 @keyframes를 통해 진행률 표시줄 애니메이션이 생성됩니다. 이 애니메이션은 주로 배경 이미지의 위치를 ​​변경하는 작업, 즉 background-position 값을 변경합니다. 스트라이프 진행바는 CSS3의 선형 그라데이션을 통해 만들어지고, 선형 그라데이션은 해당 배경에 배경 이미지를 구현하기 때문입니다

다음은 CSS 소스코드입니다.

@-webkit-keyframes progress-bar-stripes {
from {
background-position: 40px 0;
}
to {
background-position: 0 0;
}
}
@keyframes progress-bar-stripes {
from {
background-position: 40px 0;
}
to {
background-position: 0 0;
}
}

@keyframes는 애니메이션 효과만 생성합니다. 진행률 표시줄이 실제로 움직이도록 하려면 @keyframes에서 생성한 애니메이션 "progress-bar-stripes"를 특정 방식으로 호출하고 애니메이션이 적용되도록 트리거해야 합니다. 이벤트를 통해. Bootstrap 프레임워크에서 진행률 표시줄 컨테이너 "progress"에 클래스 이름 "active"를 추가하고 문서가 로드될 때 "progress-bar-stripes" 애니메이션이 적용되도록 합니다.

애니메이션 호출에 해당하는 스타일 코드는 다음과 같습니다.

.progress.active .progress-bar {
-webkit-animation: progress-bar-stripes 2s linear infinite;
animation: progress-bar-stripes 2s linear infinite;
}

예:

<h1>动态条纹进度条</h1>
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-success" style="width:25%;" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
</div>
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-info" style="width:40%;" role="progressbar" aria-valuenow="40" aria-valuemax="100" aria-valuemin="0">40%</div>
</div>
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-warning" style="width:80%;" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">80%</div>
</div>
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-danger" style="width:60%;" role="progressbar" aria-valuenow="40" aria-valuemax="100" aria-valuemin="0">60%</div>
</div>

效果如下（由于是直接从网页上结果来的图，这里并看不到它的动态效果）：

层叠进度条：

层叠进度可以将不容状态的进度条放在一起，按水平方式排列

例子：

<div class="progress">
<div class="progress-bar progress-bar-success" style="width:20%"></div>
<div class="progress-bar progress-bar-info" style="width:10%"></div>
<div class="progress-bar progress-bar-warning" style="width:30%"></div>
<div class="progress-bar progress-bar-danger" style="width:15%"></div>
</div>

除了层叠彩色进度条之外，还可以层叠条纹进度条，或者说条纹进度条和彩色进度条混合层叠，仅需要在“progress”容器中添加对应的进度条，同样要注意，层叠的进度条之和不能大于100%。

下面来看一个例子：

<div class="progress">
<div class="progress-bar progress-bar-success" style="width:20%"></div>
<div class="progress-bar progress-bar-info" style="width:20%"></div>
<div class="progress-bar progress-bar-warning" style="width:30%"></div>
<div class="progress-bar progress-bar-danger" style="width:15%"></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-striped" style="width:20%"></div>
<div class="progress-bar progress-bar-info progress-bar-striped" style="width:20%"></div>
<div class="progress-bar progress-bar-striped progress-bar-warning" style="width:30%"></div>
<div class="progress-bar progress-bar-danger progress-bar-striped" style="width:15%"></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-success" style="width:20%"></div>
<div class="progress-bar progress-bar-info progress-bar-striped" style="width:20%"></div>
<div class="progress-bar progress-bar-warning" style="width:30%"></div>
<div class="progress-bar progress-bar-danger progress-bar-striped" style="width:15%"></div>
</div>

关于Bootstrap进度条组件知识详解到此就介绍了，希望对大家有所帮助！