Every day, Bootstrap must learn the progress bar _ javascript tips-js tutorial

Every day, Bootstrap has to learn about the progress bar and has little knowledge about the progress bar. I hope you can learn more about the progress bar through this article. 1. progress bar

In a webpage, the progress bar effect is not uncommon, such as a scoring system, such as the loading status. As shown in a scoring system, it is a simple progress bar:

Like other independent components, developers can select the corresponding version based on their own needs:

☑LESS version:Source code file progress-bars.less

☑Sass version:Source code file_progress-bars.scss

☑Compiled version:Bootstrap.css file 4,500th lines ~ 4,575th rows

In addition, the Bootstrap framework provides various style progress bars for you to use.

2. progress bar-basic style

The Bootstrap framework provides a basic style for the progress bar, a 100%-width background color, and a highlighted color to indicate the 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. His sub-element sets a width, for example, the degree of completion is 30% (that is, the width ratio of the parent container), and a highlighted background color is set for it.

1) usage:

The Bootstrap framework is also implemented in this way. It provides two containers, the external container uses the "progress" style, and the Child container uses the "progress-bar" style. Progress is used to set the container style of the progress bar, while progress-bar is used to limit the progress of the progress bar. The usage is very simple:

The running effect is as follows:

2) implementation principle:

As mentioned above, the basic progress bar is divided into two parts:

The progress style mainly sets the background color, container height, and spacing of the progress bar container:

/Bootstrap.css file 4,516th lines ~ 4,524th rows/

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

While the progress-bar style sets the progress direction, it is important to set the background color and transition effect of the progress bar:

/Bootstrap.css file 4,525th lines ~ 4,538th rows/

.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) Structure Optimization:

Although the basic progress bar is achieved in this way, it is a little difficult for people with disabilities to browse the Web page, so we can make the structure better (more semantic friendly ):

 
 40% Complete 

1> role of the role attribute: Tell the search engine that p is used as a progress bar.

2> aria-valuenow = "40": the progress of the current progress bar is 40%.

3> aria-valuemin = "0" attribute: the minimum value of the progress bar is 0%.

4> aria-valuemax = "100" attribute: the maximum value of the progress bar is 100%.

3. Progress bar-color progress bar

The progress bar in the Bootstrap framework is the same as the warning information box. In order to provide a better user experience, different progress bar colors are configured based on different statuses. The color progress bar consists of the following four types:

☑Progress-bar-info:Indicates the information progress bar. The progress bar is blue.

☑Progress-bar-success:Indicates the progress bar of success. The progress bar is green.

☑Progress-bar-warning:Indicates the warning progress bar. The progress bar is yellow.

☑Progress-bar-danger:Indicates the error progress bar. The progress bar is in red.

1) usage:

The specific usage is very simple. You only need to add the corresponding class name on the basic progress. For example:

The running effect is as follows:

2) implementation principle:

Compared with the basic progress bar, the color of the progress bar has changed. The corresponding style code is as follows:

/Bootstrap.css file 4,548th lines ~ 4,550th rows/

. Progress-bar-success {background-color: # 5cb85c;}/* bootstrap.css file 4,555th lines ~ Row 4,557th */. progress-bar-info {background-color: # 5bc0de;}/* bootstrap.css file row 4,562nd ~ Row 4,564th */. progress-bar-warning {background-color: # f0ad4e;}/* bootstrap.css file row 4,569th ~ Row 4,571st */. progress-bar-danger {background-color: # d9534f ;}

4. progress bar-stripe progress bar

In addition to color progress bars, the Bootstrap framework also provides a stripe progress bar, which is implemented using a linear gradient of CSS3 without any image. To use the stripe progress bar in the Bootstrap framework, you only need to add the class name "SS-striped" based on the progress bar container "progress". Of course, if you want to make the stripe of your progress bar look like the color progress, color effect, you only need to add the corresponding color class name on the progress bar, as described in the previous color progress bar.

Let's take a look at the structure of the stripe progress bar:

The running effect is as follows:

1) original implementation:

As mentioned above, the linear gradient of CSS3 is mainly used to implement the stripe progress bar. The specific code is as follows:

/Bootstrap.css file 4,539th lines ~ 4,547th rows/

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

Similarly, each State of the stripe progress bar has a different color. The usage is the same as that of the color progress bar. Only the style has been adjusted:

/Bootstrap.css file 4,551st lines ~ 4,554th rows/

.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 file 4,558th lines ~ 4,561st rows/

.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 file 4,565th lines ~ 4,568th rows/

. 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);}/* 4,572nd rows of bootstrap.css file ~ 4,575th rows */. 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 bar-dynamic stripe progress bar

Usage:

Add the "active" class name to the progress bar "progress-striped. The following code:

1) implementation principle:

To make the stripe progress bar move, the Bootstrap framework also provides a dynamic stripe progress bar. The implementation principle is mainly implemented through the animation of CSS3. First, create a progress-bar-stripes animation through @ keyframes. This animation mainly changes the position of the background image, that is, the value of background-position. Because the stripe progress bar is produced through the linear gradient of CSS3, and the implementation of linear-gradient corresponds to the background image in the background.

/Bootstrap.css file 4,500th lines ~ 4,515th rows/

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

Everyone who knows about CSS3 knows that @ keyframes only creates an animation effect. If you want to make the progress bar really dynamic, we need to call the "SS-bar-stripes" animation created by @ keyframes in a certain way and trigger the animation to take effect through an event. In the Bootstrap framework, add a class name "active" to the progress bar container "progress" and make the file loaded take effect after the "progress-bar-stripes" animation is triggered.

The style code for calling an animation is as follows:

/Bootstrap.css file 4,544th lines ~ 4,547th rows/

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

The running effect is as follows:

Note: To make the stripe progress bar move, you need to apply the "SS-striped" and "active" at the same time. Otherwise, the stripe progress bar does not have the dynamic effect.

6. progress bar-stacked progress bar

In addition to the preceding progress bars, the Bootstrap framework also provides a stacked progress bar, which can place progress bars in different states and arrange them horizontally. The specific usage is as follows:

The running effect is as follows:

You may be wondering how it works if you haven't added additional style code to the stacked progress bar? Looking back at the basic progress bar, it is not difficult to find that there is a left floating style on the "progress-bar. That is, this style achieves the cascade effect of the above sample without adding any style code. Of course, it should be noted that the sum of the stacked progress bar width cannot be greater than 100%, and greater than 100% will cause the following adverse effects:

In addition to the stacked color progress bar, you can also cascade the stripe progress bar, or combine the stripe progress bar and the color progress bar. You only need to add the corresponding progress bar in the "progress" container, the sum of stacked progress bars cannot be greater than 100%. Here is an example:

The running effect is as follows:

7. progress bar-progress bar with Label

The progress bars described above only pass progress values to users through the color progress. However, in practice, it is often necessary to directly use the relevant values in the progress bar to pass the progress value to the user. In Bootstrap, this application scenario is considered for everyone.

1) implementation method:

You only need to add the value you need in the progress bar, for example:

 
20%

The running effect is as follows:

In another special case, when the progress bar is in the starting position, that is, when the progress bar value is 0%, will the content extend a certain width to make the progress bar color? If yes, this is not the effect we need. If not, how is it implemented? Let's take a look at this example:

 
0%

The running effect is as follows:

2) Principle Analysis:

The effect tells us that when the progress is 0%, the progress bar color is not displayed, because Bootstrap has done some processing on the style.

/Bootstrap.css file 4,748th lines ~ 4,759th rows/

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

Note: This code is available only in BootstrapV3.2. Bootstrap V3.1.1 does not have this code. It also shows that Bootstrap is constantly improving.

The above is an introduction to the Bootstrap progress bar and detailed analysis of its principles. I hope it will be helpful for your learning.