Bootstrap progress bar component Knowledge _javascript skills

In the Web page, often see progress bar effect, such as: Split the system, loading status, and so on, the progress bar components use the CSS3 transition and animation properties to complete some special effects, these effects in IE9 and IE9 the following version, Firefox's old version does not support, Opera 12 does not support the animation property.

Progress bar and other stand-alone components, developers can choose the corresponding version of their own needs:

Less:progress-bars.less

SASS: _progress-bars.scss

Base progress bar

Implementation principle:

Requires two containers, the outer container uses the class name. Progress, the child container uses the class name. Progress-bar; Where. Progress is used to set the background color of the progress bar container, the height of the container, the spacing, and so on. Progress-bar sets the progress direction, the background color of the progress bar and the excessive effect; 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,.);
Box-shadow:inset 0-1px 0 rgba (0, 0, 0,.);
-webkit-transition:width 6s ease;
Transition:width 6s ease;
}

Example:

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

Role attribute function: Tell the search engine the role of this div is the progress bar;

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

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

aria-valuemax= "100" Property function: The maximum value of the progress bar is 100%;

You can remove the <span> tab of the. Sr-only class from the progress bar component and let the current progress show up;

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

Color progress bar

Color progress bar and warning progress bar, in order to give users a better experience, but also according to different states configured a different progress bar color, mainly includes the following four kinds:

Progress-bar-info: Indicates information progress bar, Blue

Progress-bar-success: Indicates success progress bar, Green

Progress-bar-warning: Indicates a warning progress bar, yellow

Progress-bar-danger: Indicates error progress bar, red

CSS Source:

. 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 base progress bar

Example:

The effect is as follows:

Stripe progress bar

The stripe progress bar is implemented using a linear gradient of css3, without any pictures, the stripe progress bar is only required in the progress bar container. Progress on the basis of the class name "progress-striped", if you want progress stripes like color progress, with color effect, Just add the corresponding color class name to the progress bar

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

Each state corresponding to the stripe 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,.) 50%, Rgba (255, 255, 255,.) 75%, Transparent 75%, Transpare
NT); 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); } progress-striped. progress-bar-info {background-image:-webkit-linear-gradient (45deg, Rgba (255, 255, 255,.) 25%, T Ransparent 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); }. 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,.) 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); } 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,.) 50%, Rgba (255, 255, 255,.) 75%, Transparent 75%, Transpare
NT); 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); }

Now let's look at the use of stripe progress bars:

Dynamic Stripe progress bar

In the progress bar, progress,. progress-striped two classes based on the inclusion of class name. Active can achieve dynamic stripe progress bar.

Its realization principle is mainly through the CSS3 animation to complete. 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 the linear gradient of the CSS3, the linear-gradient implements the background image of the corresponding background.

Below 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 create an animation effect, if you want the progress bar to really move, we need to call the @keyframes created by a certain way "progress-bar-stripes", and through an event to trigger 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 letting the document load complete

The style code corresponding to 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:

The effect is as follows (because it is a graph directly from the results of the Web page, it does not see its dynamic effect):

Cascade Progress bar:

Cascading progress can be placed in a horizontal manner by putting a bar of progress that is not state

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 cascading color progress bar, 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%.

Here's 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>

About Bootstrap progress bar component knowledge to this introduction, I hope to help you!