Bootstrap progress bar component knowledge details, bootstrap progress bar

Bootstrap progress bar component knowledge details, bootstrap progress bar

The progress bar effect is often seen on webpages, such as the system sharding and loading status. The progress bar component uses the transition and animation attributes of css3 to complete some special effects, these effects are not supported in earlier versions of IE9 and IE9 and Firefox, and Opera 12 does not support the animation attribute.

The progress bar is the same as other independent components. developers can select the corresponding version as needed:

LESS: progress-bars.less

SASS: _ progress-bars.scss

Basic progress bar

Implementation principle:

Two containers are required. The external container uses the class name. progress, the sub-container uses the class name. progress-bar; where. progress is used to set the background color, height, and spacing of the progress bar container. progress-bar sets the progress direction, the background color and excessive effect of the progress bar. The following is the css source code:

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

Example:

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

Role of the role attribute: tells the search engine that the div is used as a progress bar;

Aria-valuenow = "30" attribute: the progress of the current progress bar is 40%;

Aria-valuemin = "0" attribute: the minimum value of the progress bar is 0%;

Aria-valuemax = "100" attribute: the maximum value of the progress bar is 100%;

You can remove the <span> label of the. sr-only class from the progress bar component to display the current progress;

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

Color progress bar

The color progress bar is the same as the warning progress bar. In order to give users a better experience, different progress bar colors are configured based on different states, including the following four types:

Progress-bar-info: progress bar, blue

Progress-bar-success: progress bar indicating success, green

Progress-bar-warning: indicates the warning progress bar, yellow

Progress-bar-danger: indicates the error progress bar in red.

Css source code:

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

Usage:

You only need to add the corresponding class name on the basic progress bar.

Example:

<H1> color progress bar 
The effect is as follows:

Stripe progress bar
The stripe progress bar is implemented using a css3 linear gradient without any image. You only need to use the stripe progress bar in the container of the progress bar. append the class name "SS-striped" on the basis of progress. If you want the progress stripe to have the same color effect as the color progress, you only need to add the corresponding color class name on the progress bar.
The following is the source code of the. progress-striped style:
.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;}
Each state corresponding to the stripe progress has a different color.
.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);}
The following describes how to use the stripe progress bar:
<H1> stripe progress bar 


Dynamic stripe progress bar
The dynamic stripe progress bar can be achieved by adding the class name. active Based on the progress bar. progress and. progress-striped.
The implementation principle is mainly 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 is exactly the background image in the corresponding background.
The following is the css source code:
@-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 only creates an animation effect. To make the progress bar really dynamic, we need to call the "progress-bar-stripes" animation created by @ keyframes in a certain way ", an animation is triggered by an event to take effect. In the Bootstrap framework, add a class name "active" to the progress bar container "progress". After the document is loaded, the "progress-bar-stripes" animation takes effect.
The style code for calling an animation is as follows:
.progress.active .progress-bar {-webkit-animation: progress-bar-stripes 2s linear infinite;animation: progress-bar-stripes 2s linear infinite;}
Example:
<H1> dynamic stripe progress bar 

The effect is as follows (because the figure is obtained directly from the webpage, the dynamic effect is not displayed here ):


Stacked progress bar:
The cascade progress can combine progress bars that are not in the available status and arrange them horizontally.
Example:

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

Here is a detailed description of the Bootstrap progress bar component. I hope it will help you!