Home > Web Front-end > Bootstrap Tutorial > Detailed explanation of the progress bar component in Bootstrap

Detailed explanation of the progress bar component in Bootstrap

青灯夜游
Release: 2021-04-08 19:57:14
forward
2903 people have browsed it

This article will give you a detailed introduction to the progress bar component in Bootstrap. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

Detailed explanation of the progress bar component in Bootstrap

In web pages, the effect of progress bars is not uncommon, such as a scoring system, such as loading status, etc. Through a simple and flexible progress bar, you can improve the current workflow or actions to provide real-time feedback. Let's take a look at the progress bar component in Bootstrap.

Related recommendations: "bootstrap tutorial"

Basic style

The Bootstrap framework provides a basic style for the progress bar , a 100% width background color, and then a highlight color to indicate completion progress. In fact, it is very easy to make such a progress bar. Generally, two containers are used. The outer container has a certain width and a background color is set. The child element sets a width. For example, the completion degree is 30% (that is, the width ratio of the parent container). ), and set a highlight background color for it

The Bootstrap framework is also implemented in this way. It provides two containers. The outer container uses the "progress" style, and the sub-container uses the "progress- bar" style. Among them, progress is used to set the container style of the progress bar, and progress-bar is used to limit the progress of the progress bar.

.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;
}
Copy after login
<div class="progress">
       <div class="progress-bar" style="width:40%"></div>
</div>
Copy after login

The better way to write accessibility is as follows

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

The role attribute tells the search engine this The function of p is a progress bar; the aria-valuenow="40" attribute tells the current progress bar that the progress is 40%; the aria-valuemin="0" attribute tells the minimum value of the progress bar is 0%; aria-valuemax="100" The property tells the maximum value of the progress bar to be 100%

Detailed explanation of the progress bar component in Bootstrap

Colored progress bar

Progress bar and warning message box in the Bootstrap framework Similarly, in order to give users a better experience, different progress bar colors are configured according to different states. It is called a colored progress bar here, which mainly includes the following four types:

☑ progress-bar-info: represents the information progress bar, the color of the progress bar is blue

☑ progress-bar- success: indicates a successful progress bar, the color of the progress bar is green

☑ progress-bar-warning: indicates a warning progress bar, the color of the progress bar is yellow

☑ progress-bar-danger: indicates an error Progress bar, the color of the progress bar is red

The specific use is very simple, you only need to add the corresponding class name to the basic progress bar. Compared with the basic progress bar, the color progress bar is the color of the progress bar. Certain changes

.progress-bar-success {
  background-color: #5cb85c;
}
.progress-bar-info {
  background-color: #5bc0de;
}
.progress-bar-warning {
  background-color: #f0ad4e;
}
.progress-bar-danger {
  background-color: #d9534f;
}
Copy after login
<div class="progress">
    <div class="progress-bar progress-bar-success" style="width:40%"></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-info" style="width:60%"></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-warning" style="width:80%"></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-danger" style="width:50%"></div>
</div>
Copy after login

Detailed explanation of the progress bar component in Bootstrap

Striped progress bar

In addition to providing colored progress bars in the Bootstrap framework, it also provides A striped progress bar, this striped progress bar is implemented using CSS3 linear gradient without using any pictures. To use the striped progress bar in the Bootstrap framework, you only need to add the class name "progress-striped" to the container "progress" of the progress bar. Of course, if you want the progress bar stripes to have a color effect like colored progress, you only need to add the class name "progress-striped" to the progress bar. Add the corresponding color class name to the bar

[Note] You can create a stripe effect for the progress bar through gradients. IE9-browser does not support it

.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;
}
Copy after login
.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);
}
Copy after login
<div class="progress progress-striped">
    <div class="progress-bar" style="width:70%"></div>
</div>
<div class="progress progress-striped">
    <div class="progress-bar progress-bar-success" style="width:40%"></div>
</div>
<div class="progress progress-striped">
    <div class="progress-bar progress-bar-info" style="width:60%"></div>
</div>
<div class="progress progress-striped">
    <div class="progress-bar progress-bar-warning" style="width:80%"></div>
</div>
<div class="progress progress-striped">
    <div class="progress-bar progress-bar-danger" style="width:50%"></div>
</div>
Copy after login

Detailed explanation of the progress bar component in Bootstrap

Dynamic Stripes

In order to make the striped progress bar move, the Bootstrap framework also provides a dynamic striped progress bar. Its implementation principle is mainly accomplished through animation of CSS3. First, a progress-bar-stripes animation is created through @keyframes. This animation mainly does one thing, which is to change the position of the background image, which is the value of background-position. Because the striped progress bar is made through the linear gradient of CSS3, and linear-gradient implements the background image in the corresponding background

[Note] IE9-browser does not support

@-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;
  }
}
Copy after login

In the Bootstrap framework, by adding a class name "active" to the progress bar container "progress", and letting the "progress-bar-stripes" animation take effect when the document is loaded, it will show the animation effect of moving from right to left.

.progress.active .progress-bar {
  -webkit-animation: progress-bar-stripes 2s linear infinite;
          animation: progress-bar-stripes 2s linear infinite;
}
Copy after login
<div class="progress progress-striped active">
    <div class="progress-bar" style="width:70%"></div>
</div>
<div class="progress progress-striped active">
    <div class="progress-bar progress-bar-success" style="width:40%"></div>
</div>
<div class="progress progress-striped active">
    <div class="progress-bar progress-bar-info" style="width:60%"></div>
</div>
<div class="progress progress-striped active">
    <div class="progress-bar progress-bar-warning" style="width:80%"></div>
</div>
<div class="progress progress-striped active">
    <div class="progress-bar progress-bar-danger" style="width:50%"></div>
</div>
Copy after login

Detailed explanation of the progress bar component in Bootstrap

Cascading Progress Bar

In addition to providing the above progress bars, the Bootstrap framework also provides a cascading progress bar strip. Cascading progress bars can place progress bars in different states together and arrange them horizontally

Put multiple progress bars into the same .progress to make them appear stacked

<div class="progress">
  <div class="progress-bar progress-bar-success" style="width: 35%">
    <span class="sr-only">35% Complete (success)</span>
  </div>
  <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
    <span class="sr-only">20% Complete (warning)</span>
  </div>
  <div class="progress-bar progress-bar-danger" style="width: 10%">
    <span class="sr-only">10% Complete (danger)</span>
  </div>
</div>
Copy after login

Detailed explanation of the progress bar component in Bootstrap

[Note]The sum of the cascading progress bars cannot be greater than 100%

<div class="progress">
  <div class="progress-bar progress-bar-success" style="width: 30%"></div>
  <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 40%"></div>
  <div class="progress-bar progress-bar-danger" style="width: 40%"></div>
</div>
Copy after login

Detailed explanation of the progress bar component in Bootstrap

提示标签

在实际开发中,有很多时候是需要在进度条中直接用相关的数值向用户传递完成的进度值,Bootstrap考虑了这种使用场景,只需要在进度条中添加需要的值

<div class="progress">
    <div class="progress-bar"  role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width:20%">20%</div>
</div>
Copy after login

Detailed explanation of the progress bar component in Bootstrap

在展示很低的百分比时,如果需要让文本提示能够清晰可见,可以为进度条设置 min-width 属性

<div class="progress">
    <div class="progress-bar"  role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width:0%">0%</div>
</div>
<div class="progress">
    <div class="progress-bar"  role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">0%</div>
</div>
<div class="progress">
    <div class="progress-bar"  role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width:1%">1%</div>
</div>
<div class="progress">
    <div class="progress-bar"  role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">1%</div>
</div>
Copy after login

Detailed explanation of the progress bar component in Bootstrap

更多编程相关知识,请访问:编程视频!!

The above is the detailed content of Detailed explanation of the progress bar component in Bootstrap. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:cnblogs.com
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template