CSS3 the implementation principle of the Round percent progress bar

Original address: CSS3 The realization principle of the round percent progress bar

Wake up this morning in view of the jquery plug-in mechanism, accidentally points into the CSS3 Circle percent progress bar related articles, so out of hand, began to toss ...

About the implementation of the circle, presumably with 2 centers of the same radius of different div can be achieved. The color of the circle is the background of the circular progress bar, the color of the small circle is the middle percentage of the matte color white, but also to add the left and right 2 sides of a semicircle, that is, a total of 4 Div, a large circle of the Div contains 3 Div, left and right side half circle, Mask div on the top.

So how does one half circle here come true? Use the Clip property of CSS to transduction just half of the same, as described in more detail later.

This implementation is actually possible (when the percentage does not exceed 50%), when more than later, you will find, for example, 60%, but the progress bar shows 40%, this is why? Because the left and right rotation of the DIV does not cover the reason, more than the respective scope should be hidden, otherwise the redundant parts will also be displayed. , when 40% is normal, when 60% is the same,

Do we need an extra 2 div to cover the HTML code?

<div class= "Circle" ><div class= "Pie_left" ><div class= "left" ></div></div><div class= "Pie_right" ><div class= "right" ></div></div><div class= "Mask" ><span>10< /span>%</div></div>

Style:

. Circle {width:200px;height:200px;position:absolute;border-radius:50%;background: #0cc;}. left,.right{width:200px ; height:200px;position:absolute;top:0px;left:0px;}. Pie_left,. Pie_right{width:200px;height:200px;position:absolute;border-radius:50%;top:0px;left:0px;background: Red;} . pie_right,.right {clip:rect (0,auto,auto,100px);}. Pie_left,. Left{clip:rect (0,100px,auto,0);/** when the top and left values are auto, the equivalent of 0* when bottom and right are value auto, which is equivalent to 100%*/.mask {width : 150px;height:150px;border-radius:50%;left:25px;top:25px;/*background: #FFF; */position:absolute;text-align: center;line-height:150px;font-size:16px;}

　　

Here the JS code is relatively simple, only need to make a little bit of judgment:

$ (function () {if ($ ('. Mask span '). Text () <=) {$ ('. Pie_right '). CSS (' transform ', ' rotate (' + ' ($ ('. Mask span '). Text () *3.6) + ' deg ');} else{$ ('. Pie_right '). CSS (' transform ', ' rotate (180deg) '), $ ('. Pie_left '). CSS (' transform ', ' rotate ' + (($ (') '. Mask span ') (text () -50) *3.6) + ' deg) ');})

　　

Note: Since 100% corresponds to 360 degrees, then 50% corresponds to 180 degrees, 1/3.6 degrees.

To introduce clip properties

Clip we commonly used is the RECT (), detailed introduction Please see this article, clip compatibility can also, in compatibility with the basic browser.

Clip Usage

For an attribute set to Position:absolute, or position:fixed, the element setting is only useful.

Clip:rect (Top,right,bottom,left);

In IE6 ' 7, remove the comma between the attributes.

The right and bottom values here are relative to left and top, and the pixels contained within the selected area are displayed, and others are hidden.

What if in case, bottom less than top,right less than left? Then the whole picture is hidden.

It is also important to note that

1. When left and top values are auto, they have a value of 0px,
2. When right and bottom values are bottom, their default value is 100%;

Here to take a serious look, the combination of right and bottom values are relative to left and top. This should be a good way to understand something.

CSS3 the implementation principle of the Round percent progress bar