CSS3 two ways to implement a progress bar

This time to everyone to bring CSS3 implementation of the two methods of progress bar, CSS3 to realize the progress of the notes are what, the following is the actual case, together to see.

As follows:

The first pose is as follows

First on the code

<p id= "Progress" >      <span></span></p>

/* corresponds to css*/    #progress {           width:300px;           height:30px;           border:1px solid #ccc;           border-radius:15px;           Overflow:hidden;  /* Note here */           box-shadow:0 0 5px 0px #ddd inset;    }              #progress span {           display:inline-block;           width:70%;           height:100%;                  Background:linear-gradient (45deg, #2989d8 30%, #7db9e8 31%, #7db9e8 58%, #2989d8 59%);               background-size:60px 30px;           Text-align:center;           Color: #fff;           Animation:load 3s ease-in;     }     @keyframes load{           0%{               width:0%;           }           100%{               width:70%;           }       }

The gradient above uses the linear-gradient in the CSS3

Linear-gradient syntax

<linear-gradient> = Linear-gradient ([[<angle> | To <side-or-corner>],]? <color-stop>[, <co lor-stop>]+) <side-or-corner> = [left | right] | | [Top | bottom]<color-stop> = <color> [<length> | <percentage>]?

• Angle: Specifies the direction (or angle) of the gradient with an angle value.

• To left: Sets the gradient to right-to-bottom. Equivalent: 270deg

• To: Sets the gradient from left to right. Equivalent: 90deg

• To top: Sets the gradient from bottom to top. Equivalent: 0deg

• To bottom: Sets the gradient from top to bottom. Equivalent to: 180deg. This is the default value, which is equivalent to leaving it blank.

• Color-stop: Used to specify the starting and ending colors for the gradient:

• Color: Specifies the color.

• Length: Specifies the position of the start and end color with the lengths value. Negative values are not allowed

• Percentage: Specifies the starting and ending color position in percent.

Chestnuts:

. test1{    background:linear-gradient (#EA2000, #E5A399);}. test2 {    background:linear-gradient (45deg, #EA2000 20%, #E5632D 50%, #E5B12D 80%);}. test3 {    background:linear-gradient (to top right, #000, #416796 50%, #B5CAE4);}. test4{    background:linear-gradient (45deg, #2989d8 30%, #7db9e8 31%, #7db9e8 58%, #2989d8 59%);   }

：

Animation through the keyframes to achieve, by changing the width of the span to achieve the effect of the progress, vegetarian Hin simple?!

Now the progress bar effect is only 70% of the effect, as long as the width of the value can be changed, like, uniformly changed to a certain value.

Second Posture

First, construct the p of the good one square and divide the square symmetrically into about two blocks, as follows

Constructed here is a 200px 200px square, divided into two 100px200px rectangles.

<p class= "Progress2" >        <p class= "rect right" >        </p>                                       <p class= ' rect left ' >        </p> </p>

. progress2{        width:200px;        height:200px;        margin:100px Auto;        position:relative;        border:1px solid #ddd;    }       . rect{        width:100px;        height:200px;        Position:absolute;        top:0;        Overflow:hidden; /* Note here */    }    . right{        right:0;    }    . left{        left:0;    }

The following effects

Next, construct a hollow circle in each rectangle, first construct the right half, as follows

<p class= "Progress2" >        <p class= "rect right" >            <p class= "Circle Rightcircle" ></p>        </p>                                       <p class= "rect left" >                    </p> </p>

. circle{        width:160px;        height:160px;        border:20px solid #ccc;        border-radius:50%;        Position:absolute;        top:0;    }    . rightcircle{        border-top:20px solid rgb (41,137,216);        border-right:20px solid RGB (41,137,216);        right:0;    }

You'll see the following effect

Because in the class:rect, the overflow is set to hidden, so that the overflow part is obscured, and then the effect implementation is closely related to this attribute.

If this property is not set, this is the effect.

That's going to find a part of it covered, and we're turning him 45 degrees.

. circle{        width:160px;        height:160px;        border:20px solid #ccc;        border-radius:50%;        Position:absolute;        top:0;        Transform:rotate (45DEG); /* Note here */    }

The effect is as follows

The way we animate it is to make the right half rotate 180 degrees, and then the left half rotates 180 degrees, making a complete effect.

First the right half of the animation effect, that is, the first to rotate it 45 degrees, and then rotate 180 degrees, because this is only the right half, so in 50% should be rotated, and then remain unchanged.

. rightcircle{        border-top:20px solid rgb (41,137,216);        border-right:20px solid RGB (41,137,216);        right:0;        Animation:load_right 5s linear infinite;    }    @keyframes load_right{        0%{            transform:rotate (45deg);        }        50%{            transform:rotate (225deg);        }        100%{            transform:rotate (225deg);        }    }

This is not the effect of setting Overflow:hidden in the class rect

This is the effect of setting the Overflow:hidden in the class rect

Now, we can put the left half also together, in the same vein, the animation effect first rotated 45 degrees, adjusted, and then remained unchanged, after 50%, and then began to rotate 180 degrees. This connects to the right half.

<p class= "Progress2" >        <p class= "rect right" >            <p class= "Circle Rightcircle" ></p>        </p>                                       <p class= "rect left" >            <p class= "Circle leftcircle" ></p>        </p> </p>

. leftcircle{        border-bottom:20px solid rgb (41,137,216);        border-left:20px solid RGB (41,137,216);        left:0;        Animation:load_left 5s linear infinite;    }    @keyframes load_left{        0%{            transform:rotate (45deg);        }        50%{            transform:rotate (45deg);        }        100%{            transform:rotate (225deg);        }    }

That's the whole effect.

You can adjust the angle or adjust the color to achieve the reverse effect.

I adjust the color to get the first animation effect, the following is the complete code

<p class= "Progress2" >        <p class= "rect right" >            <p class= "Circle Rightcircle" ></p>        </p>                                       <p class= "rect left" >            <p class= "Circle leftcircle" ></p>        </p> </p>

. progress2{width:200px;        height:200px;        margin:100px Auto;    position:relative;        }. rect{width:100px;        height:200px;        Position:absolute;        top:0;    Overflow:hidden;    }. right{right:0;    }. left{left:0;        }. circle{width:160px;        height:160px;        border:20px solid RGB (41,137,216);        border-radius:50%;        Position:absolute;        top:0;    Transform:rotate (45DEG);        }. rightcircle{border-top:20px solid #ccc;        border-right:20px solid #ccc;        right:0;    Animation:load_right 5s linear Infinite;        }. leftcircle{border-bottom:20px solid #ccc;        border-left:20px solid #ccc;        left:0;    Animation:load_left 5s linear Infinite;        } @keyframes load_right{0%{transform:rotate (45deg);        } 50%{transform:rotate (225deg); } 100%{Transform:Rotate (225deg);        }} @keyframes load_left{0%{transform:rotate (45deg);        } 50%{transform:rotate (45deg);        } 100%{transform:rotate (225deg); }    }

Believe that you have read the case of this article you have mastered the method, more exciting please pay attention to the PHP Chinese network other related articles!

Recommended reading:

Using CSS3 to realize the Avatar rotation effect animation

How to use CSS Background-attachment advanced method

CSS to make ripple animations