Graphical CSS3 method for making a doughnut-shaped progress bar

The basic idea of making a doughnut-shaped progress bar is to draw a basic arc graph, and then we can control its rotation to CSS3 the basic figure in series, create the effect of partial disappearance, and then take you to learn the method of drawing CSS3 to make the circle-shaped progress bar.

First, when someone says you can make a circular progress bar effect, if it is a static complete circular progress bar, then it is very simple:

. circleprogress{       width:160px;       height:160px;       border:20px solid red;       border-radius:50%;   }

And then you say, it's easy. But what if it's not a full circle? Think about it:

. circleprogress{     width:160px;     height:160px;     border:20px solid red;     border-left:20px solid transparent;     border-bottom:20px solid transparent;     border-radius:50%;   }

And then I will say, this is not difficult. But what if it's not just a multiple of 45 degrees?

OK, let's set up a 200x200 block, and we'll do our work here:

. circleprogress_wrapper{     width:200px;     height:200px;     margin:50px Auto;     position:relative;     border:1px solid #ddd;   }

Next I'll put two more rectangles in this container, each of which is half of the rectangle:

<p class= "Circleprogress_wrapper" >        <p class= "wrapper right" >            <p class= "circleprogress Rightcircle "></p>        </p>        <p class=" wrapper left ">            <p class=" circleprogress Leftcircle "></p>        </p> </p>

. wrapper{     width:100px;     height:200px;     Position:absolute;     top:0;     Overflow:hidden;   }   . rightright{     rightright:0;   }   . left{     left:0;   }

Here's the point. Wrapper's Overflow:hidden; Play a key role. Both rectangles have overflow hiding, so when we rotate the circle inside the rectangle, the overflow is hidden, so that we can achieve the effect we want.

From the HTML structure has also been seen, in the left and right rectangle inside will also have a circle, first of all to talk about the circle:

. circleprogress{     width:160px;     height:160px;     border:20px solid transparent;     border-radius:50%;     Position:absolute;     top:0;   }   . rightcircle{     border-top:20px solid green;     border-right:20px solid Green;     rightright:0;   }

Can see, the effect has come out, in fact, it is a semicircle arc, but because we set the top border and the right border, so the top of the bounding box is half overflow and is hidden, so we can be restored by rotation:

. circleprogress{     width:160px;     height:160px;     border:20px solid transparent;     border-radius:50%;     Position:absolute;     top:0;     -webkit-transform:rotate (45deg);   }

So as long as you rotate the angle you want to achieve any proportion of the progress bar. Next, the left half arc is also realized, turning into a full circle:

. leftcircle{       border-bottom:20px solid green;       border-left:20px solid Green;       left:0;   }

Then, is to let it move, the principle is this, first let the right half arc rotation 180 degrees, and then let the left half arc rotation 180 degrees, so that two semi-circular arc due to all overflow and disappeared, so it looks like the progress bar re-scrolling effect:

   . rightcircle{     border-top:20px solid green;     border-right:20px solid Green;     rightright:0;     -webkit-animation:circleprogressload_right 5s linear infinite;   }   . leftcircle{     border-bottom:20px solid green;     border-left:20px solid Green;     left:0;     -webkit-animation:circleprogressload_left 5s linear infinite;   }   @-webkit-keyframes circleprogressload_right{     0%{       -webkit-transform:rotate (45deg);     }     50%,100%{       -webkit-transform:rotate (225deg);     }   }   @-webkit-keyframes circleprogressload_left{     0%,50%{       -webkit-transform:rotate (45deg);     }     100%{       -webkit-transform:rotate (225deg);     }   }

Of course, we only need to adjust the angle to achieve the reverse effect:

   . circleprogress{     width:160px;     height:160px;     border:20px solid transparent;     border-radius:50%;     Position:absolute;     top:0;     -webkit-transform:rotate ( -135deg);   }   @-webkit-keyframes circleprogressload_right{     0%{       -webkit-transform:rotate ( -135deg);     }     50%,100%{       -webkit-transform:rotate (45deg);     }   }   @-webkit-keyframes circleprogressload_left{     0%,50%{       -webkit-transform:rotate ( -135deg);     }     100%{       -webkit-transform:rotate (45deg);     }   }

OK, the next step is to rush to the final effect, as we saw at the beginning, a bit like the way we used 360 guards to clean up the garbage, of course not very much like:

  . circleprogress_wrapper{width:200px;     height:200px;     margin:50px Auto;     position:relative;   border:1px solid #ddd;     }. wrapper{width:100px;     height:200px;     Position:absolute;     top:0;   Overflow:hidden;   }. rightright{rightright:0;   }. left{left:0;     }. circleprogress{width:160px;     height:160px;     border:20px Solid RGB (232, 232, 12);     border-radius:50%;     Position:absolute;     top:0;   -webkit-transform:rotate (45DEG);     }. rightcircle{border-top:20px solid Green;     border-right:20px solid Green;     rightright:0;   -webkit-animation:circleprogressload_right 5s linear Infinite;     }. leftcircle{border-bottom:20px solid Green;     border-left:20px solid Green;     left:0;   -webkit-animation:circleprogressload_left 5s linear Infinite;       } @-webkit-keyframes circleprogressload_right{0%{border-top:20px solid #ED1A1A;       border-right:20px solid #ED1A1A; -webkit-tRansform:rotate (45DEG);       } 50%{border-top:20px solid RGB (232, 232, 12);       border-right:20px Solid RGB (232, 232, 12);       border-left:20px solid RGB (81, 197, 81);       border-bottom:20px solid RGB (81, 197, 81);     -webkit-transform:rotate (225DEG);       } 100%{border-left:20px solid green;       border-bottom:20px solid Green;     -webkit-transform:rotate (225DEG);       }} @-webkit-keyframes circleprogressload_left{0%{border-bottom:20px solid #ED1A1A;       border-left:20px solid #ED1A1A;     -webkit-transform:rotate (45DEG);       } 50%{border-bottom:20px solid RGB (232, 232, 12);       border-left:20px Solid RGB (232, 232, 12);       border-top:20px solid RGB (81, 197, 81);       border-right:20px solid RGB (81, 197, 81);     -webkit-transform:rotate (45DEG);       } 100%{border-top:20px solid green;       border-right:20px solid Green;       border-bottom:20px solid Green;      border-left:20px solid Green; -webkit-transform:rotate (225DEG); }   }

Can see, in fact, more than some change the color of the different borders of the animation just, this will give you to practice it! The main thing is to use two rectangles to achieve such a circular progress bar effect, pay special attention to overflow this rule, plays a key role.