On web pages, progress bar effects are often seen, such as bisecting the system, loading status, etc. The progress bar component uses the transition and animation attributes of css3 to complete some special effects. These special effects are not supported in IE9 and below versions of IE9 and Firefox, and Opera 12 does not support animation attributes.
The progress bar is like other independent components, developers can choose the corresponding version according to their needs:
LESS: progress-bars.less
SASS: _progress-bars.scss
Basic progress bar
Implementation principle:
Two containers are required. The outer container uses the class name.progress and the subcontainer uses the class name.progress-bar; where .progress is used to set the background color of the progress bar container, the height, spacing, etc.; and .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: #ffff;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><div role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"><span>30%</span></div></div>
role attribute function: tells search engines that the function of this div is the progress bar;
aria-valuenow=”30” attribute function: the current progress bar progress is 40%;
aria-valuemin=”0” attribute function: the minimum value of the progress bar is 0%;
aria-valuemax=”100” attribute function: the maximum value of the progress bar is 100%;
You can remove the <span> tag with the .sr-only class set from the progress bar component to let the current progress be displayed;
<div><div role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" >40%</div></div>
Colorful progress bar
The colored progress bar is the same as the warning progress bar. In order to give users a better experience, different progress bar colors are also configured according to different states, mainly including the following four types:
progress-bar-info: represents the information progress bar, blue
progress-bar-success: indicates success progress bar, green
progress-bar-warning: indicates the warning progress bar, yellow
progress-bar-danger: indicates the error progress bar, 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;}How to use:
Just add the corresponding class name to the basic progress bar
example:
<h1>Colorful progress bar</h1><div><div role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div></div><div><div role="progressbar" aria-valuemax="40" aria-valuemax="100" aria-valuemax="0">40%</div></div><div><div role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">80%</div></div><div><div role="progressbar" aria-valuenow="40" aria-valuemax="100" aria-valuemin="0">60%</div></div>
The effects are as follows:
Striped progress bar
The striped progress bar uses the linear gradient of css3. It does not use any pictures. Using the striped progress bar only requires adding the class name "progress-striped" to the container of the progress bar. Progress. If you want to make a progress stripe like a color progress and have a color effect, you only need to add the corresponding color class name to the progress bar.
The following is the .progress-striped style source code:
.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 75%, transparent );background-image:linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 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 streak progress also 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 75%, transparent );background-image:linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 25%, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, .15) 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, .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, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(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%, 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, .15) 50%, rgba(255, 255, .15) 75%, transparent 75%, transparent);background-image:linear-gradient(45deg, rgba(255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);}Let’s take a look at the use of striped progress bars:
<h1>Striped progress bar</h1><div><div role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div></div><div><div role="progressbar" aria-valuemax="40" aria-valuemax="100" aria-valuemax="0">40%</div></div><div><div role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">80%</div></div><div><div role="progressbar" aria-valuenow="40" aria-valuemax="100" aria-valuemin="0">60%</div></div>
Dynamic stripe progress bar
Dynamic stripe progress bar can be realized based on the progress bar.progress and .progress-striped two classes, adding the class name.active.
The implementation principle is mainly accomplished through the 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, that is, the value of the background-position. Because the striped progress bar is made through the linear gradient of CSS3, and linear-gradient implements the background picture corresponding to the background
Here 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 just creates an animation effect. If we want the progress bar to really move, we need to call the animation "progress-bar-stripes" 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 let the document loading be completed and touch the "progress-bar-stripes" animation to take effect
The corresponding style code for the call 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</h1><div><div role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div></div><div><div role="progressbar" aria-valuemax="40" aria-valuemax="100" aria-valuemax="0">40%</div></div><div><div role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">80%</div></div><div><div role="progressbar" aria-valuenow="40" aria-valuemax="100" aria-valuemin="0">60%</div></div>
The effect is as follows (since it is a picture that comes directly from the result on the web page, it cannot see its dynamic effect here):
Cascade progress bar:
The stacking progress can put the incompatible progress bars together and arrange them horizontally.
example:
<div><div></div><div></div><div></div><div></div><div></div>
In addition to stacking color progress bars, you can also stack striped progress bars, or mix and stack striped progress bars with color progress bars. You only need to add the corresponding progress bars to the "progress" container. Also note that the sum of the stacked progress bars cannot be greater than 100%.
Let’s take a look at an example:
<div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
This is a detailed explanation of Bootstrap progress bar component knowledge. I hope it will be helpful to everyone!