Bootstrap이 매일 배워야 하는 진행률 표시줄_javascript 기술

1. 진행률 표시줄

웹페이지에서는 로딩 상태 등 채점 시스템 등 진행률 표시줄의 효과가 흔합니다.

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

✓ 적은 버전: 소스 코드 파일 Progress-bars.less

✓ Sass 버전: 소스 파일 _progress-bars.scss

✓ 이후 버전 컴파일: bootstrap.css 파일의 4500행~4575행

그리고 Bootstrap 프레임워크는 모든 사람이 사용할 수 있는 다양한 스타일의 진행률 표시줄을 제공합니다.

2. 진행률 표시줄 – 기본 스타일

Bootstrap 프레임워크는 진행률 표시줄의 기본 스타일, 100% 너비의 배경색, 완료 진행률을 나타내는 강조 표시 색상을 제공합니다. 실제로 이러한 진행률 표시줄을 만드는 것은 매우 쉽습니다. 일반적으로 두 개의 컨테이너가 사용됩니다. 외부 컨테이너는 특정 너비를 가지며 해당 하위 요소는 너비를 설정합니다. 예를 들어 완성도는 30%입니다. (즉, 상위 컨테이너의 너비) 스케일 값) 강조 표시 배경색을 설정합니다.

1) 사용 방법:

Bootstrap 프레임워크도 이런 방식으로 구현됩니다. 외부 컨테이너인 두 개의 컨테이너를 사용합니다. "진행" 스타일, 하위 컨테이너는 "진행률 표시줄" 스타일을 사용합니다. 그 중 진행률은 진행률 표시줄의 컨테이너 스타일을 설정하는 데 사용되며, 진행률 표시줄은 진행률 표시줄의 진행률을 제한하는 데 사용됩니다. 사용 방법은 매우 간단합니다:

2) 구현 원리

앞서 언급했듯이 이러한 기본 진행률 표시줄은 크게 두 부분으로 나뉩니다.

진행 스타일은 주로 진행률 표시줄 컨테이너의 배경색, 컨테이너 높이, 간격 등을 설정합니다.

/bootstrap.css 파일 line 4516~line 4524/

.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);
}

진행 표시줄 스타일이 진행 방향을 설정하는 동안 진행 표시줄의 배경색과 전환 효과를 설정하는 것이 중요합니다.

/boottrap.css의 4525~4538줄 file/

.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;
}

3), 구조적 최적화:

이렇게 하면 기본 진행률 표시줄 효과가 달성되지만, 장애인이 웹을 탐색하는 것이 다소 어렵기 때문에 구조를 더 좋게 만들 수 있습니다(의미론적으로 더 친숙함):

40% Complete

1>, 역할 속성 기능: Tell 이 div의 기능은 진행률 표시줄인 검색 엔진입니다.

2>, aria-valuenow="40" 속성 효과: 현재 진행률 표시줄 진행률은 40%입니다.

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

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

3. 진행률 표시줄 - 색상이 지정된 진행률 표시줄

Bootstrap 프레임워크의 진행률 표시줄은 사용자에게 더 나은 결과를 제공하기 위해 경고 메시지 상자와 동일합니다. 경험에 따르면 다양한 상태가 다양한 진행률 표시줄 색상으로 구성됩니다. 여기서는 컬러 진행률 표시줄이라고 하며 주로 다음 네 가지 유형을 포함합니다.

🙌 Progress-bar-info: 는 정보 진행률 표시줄을 나타내며, 색상은 진행률 표시줄이 파란색입니다

🙌 Progress-bar-success: 는 성공적인 진행률 표시줄을 나타내며 진행률 표시줄의 색상은 녹색입니다

🙌 Progress -bar-warning: 은 경고 진행률 표시줄을 나타내며 진행률 표시줄의 색상은 노란색입니다.

밋진행 -bar-danger: 는 오류 진행률 표시줄을 나타냅니다. 진행률 표시줄의 색상은 빨간색입니다.

1) 사용 방법:

구체적인 사용법은 매우 간단합니다. 기본 진행만 따르면 됩니다. 해당 클래스 이름을 추가하세요.

2) 구현 원리:

기본 진행률 표시줄에 비해 색상 진행률 표시줄의 진행 색상이 일정하게 변경됩니다. bar에 해당하는 스타일 코드는 다음과 같습니다.

/bootstrap.css 파일 4548행 ~ 4550행/

.progress-bar-success {
 background-color: #5cb85c;
}
/*bootstrap.css文件第4555行～第4557行*/
.progress-bar-info {
 background-color: #5bc0de;
}
/*bootstrap.css文件第4562行～第4564行*/
.progress-bar-warning {
 background-color: #f0ad4e;
}
/*bootstrap.css文件第4569行～第4571行*/
.progress-bar-danger {
 background-color: #d9534f;
}

4. 진행률 표시줄 - 줄무늬 진행률 표시줄

부트스트랩 프레임워크는 색상이 지정된 진행률 표시줄 외에도 줄무늬 진행률 표시줄도 도움 없이 CSS3 선형 그라디언트를 사용하여 구현됩니다. 부트스트랩 프레임워크에서 줄무늬 진행률 표시줄을 사용하려면 진행률 표시줄의 컨테이너 "progress"에 클래스 이름 "progress-striped"만 추가하면 됩니다. 물론 진행률 표시줄 줄무늬에 색상 효과를 적용하려는 경우입니다. 컬러 진행과 마찬가지로 이전 컬러 진행 표시줄에서 언급한 대로 해당 색상 클래스 이름을 진행 표시줄에 추가하기만 하면 됩니다.

줄무늬 진행률 표시줄을 만드는 구조를 살펴보겠습니다: ,

1), 원래 구현:

앞서 언급했듯이 스트라이프 진행률 표시줄은 주로 CSS3의 선형 그래디언트를 사용합니다. 구체적인 코드는 다음과 같습니다.

/bootstrap.css 파일 line 4539~line 4547/

.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;
}

同样的，条纹进度条对应的每种状态也有不同的颜色，使用方法与彩色进度条一样。只是样式上做了一定的调整：

/bootstrap.css文件第4551行～第4554行/

.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);
}

/bootstrap.css文件第4558行～第4561行/

.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);
}

/bootstrap.css文件第4565行～第4568行/

.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);
}
/*bootstrap.css文件第4572行～第4575行*/
.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);
}

5、进度条–动态条纹进度条

使用方法：

在进度条“progress progress-striped”两个类的基础上再加入“active”类名。如下代码：

<br/>

1）、实现原理：

为了让条纹进度条动起来，Bootstrap框架还提供了一种动态条纹进度条。其实现原理主要通过CSS3的animation来完成。首先通过@keyframes创建了一个progress-bar-stripes的动画，这个动画主要做了一件事，就是改变背景图像的位置，也就是background-position的值。因为条纹进度条是通过CSS3的线性渐变来制作的，而linear-gradient实现的正是对应背景中的背景图片。

/bootstrap.css文件第4500行～第4515行/

@-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;
 }
}

了解CSS3的同学都知道，@keyframes仅仅是创建了一个动画效果，如果要让进度条真正的动起来，我们需要通过一定的方式调用@keyframes创建的动画“progress-bar-stripes”，并且通过一个事件触发动画生效。在Bootstrap框架中，通过给进度条容器“progress”添加一个类名“active”，并让文档加载完成就触“progress-bar-stripes”动画生效。

<br/>

调用动画对应的样式代码如下：

/bootstrap.css文件第4544行～第4547行/

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

运行效果如下：

特别注意：要让条纹进度条动起来，就需要让“progress-striped”和“active”同时运用，不然条纹进度条是不具备动效效果。

6、进度条–层叠进度条

Bootstrap框架除了提供上述几种进度条之外，还提供了一种层叠进度条，层叠进度条，可以将不同状态的进度条放置在一起，按水平方式排列。具体使用如下：

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

运行效果如下：

7、进度条–带Label的进度条

上面介绍的各种进度条，都仅仅是通过颜色进度向用户传递进度值。但实际中，有很多时候是需要在进度条中直接用相关的数值向用户传递完成的进度值，在Bootstrap就为大家考虑了这种使用场景。

1）、实现方法：

只需要在进度条中添加你需要的值，如：

20%

还有一种特殊情形，当进度条处于开始位置，也就是进度条的值为0%时，内容是否会撑开一定的宽度，让进度条具有颜色呢？如果是，这不是我们需要的效果，如果不是，又是怎么实现的呢？我们先来看一个这样的示例：

0%

2）、原理分析：<br/>

效果告诉我们，当进度为0%，进度条颜色并没有显示出来，那是因为Bootstrap在样式上做了一定的处理。

/bootstrap.css文件第4748行~第4759行/

.progress-bar[aria-valuenow="1"],
.progress-bar[aria-valuenow="2"] {
 min-width: 30px;
}
.progress-bar[aria-valuenow="0"] {
 min-width: 30px;
 color: #777;
 background-color: transparent;
 background-image: none;
 -webkit-box-shadow: none;
  box-shadow: none;
}

注：这段代码BootstrapV3.2版本才有。在Bootstrap V3.1.1版本是不具有这段代码，同时也说明，Bootstrap在不断的完善之中。

以上就是关于Bootstrap进度条的全部内容介绍，并有详细的Bootstrap教程，希望对大家的学习有所帮助。