Bootstrap the progress bar _javascript skills you must learn every day

1. Progress bar

In Web pages, the effect of a progress bar is not uncommon, such as a scoring system, such as loading status. As shown in the following illustration of a scoring system, he is a simple progress bar effect:

The progress bar, like other standalone components, allows the developer to choose the appropriate version for its own needs:

☑less Version: source file progress-bars.less

☑sass Version: source file _progress-bars.scss

☑ compiled version:bootstrap.css file No. 4500 line ~ No. 4575 Line

And bootstrap framework for you to provide a variety of style style of progress bar for everyone to use.

2. Progress bar – Basic style

The bootstrap frame provides a basic style for the progress bar, a 100%-width background color, and a highlighted color to indicate the completion of the progress. In fact, making such a progress bar is very easy, typically use two containers, the outer container has a certain width, and set a background color, his child elements set a width, such as the degree of completion is 30% (that is, the width of the parent container value), but also to set a highlighted background color.

1), use method:

The bootstrap framework is also implemented in such a way that he provides two containers, the outer container uses the "progress" style, and the child container uses the "Progress-bar" style. Where 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. The use of the method is very simple:

<div class= "Progress" >
 <div class= "Progress-bar" style= "width:40%" ></div>
</div>

The operation effect is as follows:

2), the principle of realization:

As I said before, the basic progress bar is divided into two parts:

Progress style mainly sets the background color of the progress bar, container height, spacing, etc.:

/bootstrap.css file line No. 4516 ~ No. 4524 Line

. 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 is setting the progress direction, it is important to set the background color and transition effect of the progress bar:

/bootstrap.css file line No. 4525 ~ No. 4538 Line

. 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,.);
 Box-shadow:inset 0-1px 0 rgba (0, 0, 0,.);
 -webkit-transition:width 6s ease;
 Transition:width 6s ease;
}

3), structural optimization:

While the basic progress bar effect is achieved, it's a bit difficult for people with disabilities to browse the Web, so we can do a better job (semantically friendlier):

<div class= "Progress" > <div class= "Progress-bar" style= "width:40%; role=" ProgressBar
 "0" aria-valuemin= "aria-valuemax=" >
 <span class= "sr-only"
 >40% complete</span> </div>
</div>

1>, role attribute function: Tell the search engine this div function is the progress bar.

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

3>, aria-valuemin= "0" Property action: The minimum value of the progress bar is 0%.

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

3, progress Bar-color progress bar

The progress bar in the bootstrap frame is the same as the warning message box, and a different progress bar color is configured according to different states in order to give the user a better experience. This is called the Color progress bar, which mainly includes the following four kinds:

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

☑progress-bar-success: indicates success progress bar, progress bar color is green

☑progress-bar-warning: indicates a warning progress bar with a progress bar color of yellow

☑progress-bar-danger: indicates error progress bar, progress bar color is red

1), use method:

The exact use is very simple, only need to increase the corresponding class name on the basis of progress. Such as:

<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>

The operation effect is as follows:

2), the principle of realization:

The color progress bar and the basic progress bar, is the progress bar color to make a certain change, its corresponding style code is as follows:

/bootstrap.css file line No. 4548 ~ No. 4550 Line

. progress-bar-success {
 background-color: #5cb85c;
}
/*bootstrap.css file line No. 4555 ~ No. 4557 Line * *
progress-bar-info {
 background-color: #5bc0de;
}
/*bootstrap.css file line No. 4562 ~ No. 4564 Line * *
progress-bar-warning {
 background-color: #f0ad4e;
}
/*bootstrap.css file line No. 4569 ~ No. 4571 Line * *
progress-bar-danger {
 background-color: #d9534f;
}

4, progress Bar-stripe progress bar

In addition to the color progress bar provided in the bootstrap framework, a stripe progress bar is provided, which is implemented with a linear gradient of CSS3, without any pictures. Using the stripe progress bar in the bootstrap frame you only need to add the class name "Progress-striped" based on the progress bar's container "Progress", of course, if you want to make your progress bar stripes like color progress, with color effect, You only need to add the corresponding color class name on the progress bar, as the previous color progress bar says.

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

<div class= "Progress progress-striped" > <div class= "Progress-bar progress-bar-success" style=
 % "></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>

The operation effect is as follows:

1), the original realization:

As mentioned earlier, the implementation stripe progress bar, mainly uses the CSS3 linear gradient, its specific code is as follows:

/bootstrap.css file line No. 4539 ~ No. 4547 Line

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

Similarly, the stripe progress bar corresponds to each state also has a different color, using the same method as the color progress bar. Just a certain adjustment in the style:

/bootstrap.css file line No. 4551 ~ No. 4554 Line

. progress-striped. progress-bar-success {
 background-image:-webkit-linear-gradient (45deg, Rgba (255, 255, 255,.) 25%, transparent 25%, transparent 50%, RGBA (255, 255, 255,.) 50%, Rgba (255, 255, 255,.) 75%, Transparent 75%, tr ansparent);
 Background-image:linear-gradient (45deg, Rgba (255, 255, 255,.) 25%, transparent 25%, transparent 50%, RGBA (255, 255, 255 50%, Rgba (255, 255, 255,.) 75%, transparent 75%, transparent);

/bootstrap.css file line No. 4558 ~ No. 4561 Line

. 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,.) 50%, Rgba (255, 255, 255,.) 75%, Transparent 75%, TRANSP arent);
 Background-image:linear-gradient (45deg, Rgba (255, 255, 255,.) 25%, transparent 25%, transparent 50%, RGBA (255, 255, 255 50%, Rgba (255, 255, 255,.) 75%, transparent 75%, transparent);

/bootstrap.css file line No. 4565 ~ No. 4568 Line

 progress-striped. progress-bar-warning {background-image:-webkit-linear-gradient ( 45deg, Rgba (255, 255, 255,.) 25%, transparent 25%, transparent 50%, RGBA (255, 255, 255,.) 50%, Rgba (255, 255, 255,.
 75%, transparent 75%, transparent); Background-image:linear-gradient (45deg, Rgba (255, 255, 255,.) 25%, transparent 25%, transparent 50%, RGBA (255, 255, 255
50%, Rgba (255, 255, 255,.) 75%, transparent 75%, transparent); /*bootstrap.css file line No. 4572 ~ No. 4575 Line * * progress-striped. Progress-bar-danger {background-image:- Webkit-linear-gradient (45deg, Rgba (255, 255, 255,.) 25%, transparent 25%, transparent 50%, RGBA (255, 255, 255,. 15) 50%
 , Rgba (255, 255, 255,.) 75%, transparent 75%, transparent); Background-image:linear-gradient (45deg, Rgba (255, 255, 255,.) 25%, transparent 25%, transparent 50%, RGBA (255, 255, 255
50%, Rgba (255, 255, 255,.) 75%, transparent 75%, transparent); }

5, progress Bar-dynamic Stripe progress bar

How to use:

Add the "Active" class name on the basis of the progress bar "Progress progress-striped" two classes. The following code:

<div class= "Progress progress-striped Active" > <div class= "Progress-bar progress-bar-success" style= "
 width:40% "></div>
</div>

1), the principle of realization:

In order for the stripe progress bar to move, the bootstrap framework also provides a dynamic stripe progress bar. The realization principle is mainly accomplished by CSS3 animation. First through the @keyframes to create a progress-bar-stripes animation, this animation is mainly done one thing, is to change the position of the background image, that is, background-position value. Because the stripe progress bar is made by CSS3 linear gradients, the linear-gradient implements the background image in the corresponding background.

/bootstrap.css file Line No. 4500 ~ No. 4515 Line

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

Understand CSS3 students know, @keyframes just create an animation effect, if you want to let the progress bar really move, we need to call the @keyframes created by a certain way "progress-bar-stripes", And an event triggers the animation to take effect. In the bootstrap framework, the "Progress-bar-stripes" animation takes effect by adding a class name "active" to the progress bar container "progress" and having the document load complete.

<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>

The style code corresponding to the call animation is as follows:

/bootstrap.css file line No. 4544 ~ No. 4547 Line

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

The operation effect is as follows:

Special note: To let the stripe progress bar to move up, you need to let "progress-striped" and "active" at the same time, otherwise the stripe progress bar is not have the effect of action.

6, progress Bar-Cascade progress bar

In addition to the several progress bars mentioned above, the bootstrap framework also provides a cascade of progress bars, cascading progress bars that place progress bars in different states together, arranged horizontally. The specific use is as follows:

<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>

The operation effect is as follows:

You may be wondering, how is it normal to not add extra style code for cascading progress bars? You can look back at the basic progress bar section, and it's not hard to see that there is a left-floating style on "Progress-bar". This is the style that will cascade the above example without adding any style code. Of course, one thing to note is that the sum of the width of the cascading progress bar cannot be greater than 100%, and greater than 100% will result in the following undesirable effects:

In addition to cascading color progress bars, you can cascade stripe progress bar, or stripe progress bar and color progress bar mixed cascade, only need to add the corresponding progress bar in the "Progress" container, also note that the stack of the sum of the progress bar can not be greater than 100%. To simply look at an example:

<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=" ></div> </div>

The operation effect is as follows:

7. Progress bar – Progress bar with label

The various progress bars described above simply pass the progress values to the user through the color progress. But in practice, there are many times it is necessary to directly use the relevant values in the progress bar to pass the completed progress value to the user, in the bootstrap for everyone to consider the use of this scenario.

1), Implementation methods:

Just add the values you need in the progress bar, such as:

<div class= "Progress" >
 <div class= "Progress-bar progress-bar-success" role= "ProgressBar" Aria-valuenow = "aria-valuemin=" 0 "aria-valuemax=" style= "width:20%" >20%</div>
</div>

The operation effect is as follows:

There is also a special case, when the progress bar is at the beginning, that is, the progress bar value is 0%, the content will open a certain width, so that the progress bar has color? If it is, this is not the effect we need, if not, how to achieve it? Let's take a look at an example like this:

<div class= "Progress" >
 <div class= "Progress-bar" role= "ProgressBar" aria-valuenow= "0" aria-valuemin= "0 "aria-valuemax=" >0%</div>
</div>

The operation effect is as follows:

2), principle analysis:

The effect tells us, when the progress is 0%, the progress bar color does not show, that is because the bootstrap has done certain processing in the style.

/bootstrap.css file line No. 4748 ~ No. 4759 Line

. 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 piece of code is BootstrapV3.2 version only. In the bootstrap V3.1.1 version is not to have this code, but also to explain that the bootstrap in the continuous improvement.

If you want to further study, you can click here to learn, and then attach two wonderful topics: Bootstrap Learning Tutorials Bootstrap Practical course

The above is about the bootstrap progress bar of all the contents of the introduction, and have detailed analysis of the principle, I hope that the study of everyone to help.