Implementation principle of CSS3 circular percentage progress bar_html/css_WEB-ITnose

Original text http://ymblog.net/2015/06/20/css3 Implementation principle of circular percentage progress bar/

When I woke up this morning and checked out the jquery plug-in mechanism, I accidentally clicked on the article related to the css3 circular percentage progress bar, so I got out of hand and started to mess around. . .

Regarding the realization of a circular circle, it can be achieved by using two divs with the same center and different radii. The color of the big circle is the background color of the circular progress bar, and the color of the small circle is the mask color white of the middle percentage, plus a semicircle on the left and right sides, which means there should be a total of 4 divs and a big circle. The div contains 3 divs, half a circle on the left and right sides, and the mask div is at the top.

How to realize half a circle on one side here? Using the clip attribute of CSS, you can cut the image and display only half of it, which will be introduced in detail later.

This kind of implementation effect is actually possible (when the percentage does not exceed 50%). When it exceeds, you will find that, for example, it is 60%, but the progress bar shows 40%. Why? Woolen cloth? Because the divs that rotate left and right are not covered, they should be hidden if they exceed their respective ranges, otherwise the excess parts will also be displayed. As shown in the picture, it is normal when it is 40%, and it is the same when it is 60%.

Then do we need two additional divs to cover it? Let’s look at 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);}/**当top和left取值为auto时，相当于0*当bottom和right取值为auto时，相当于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;}

The js code here is relatively simple, and you only need to make a little judgment:

$(function(){if( $('.mask span').text() <= 50 ){$('.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)');}})

Explanation: Because 100% corresponds to 360 degrees, then 50% corresponds to 180 degrees, 1/3.6 degrees.

Let’s introduce the Clip attribute

The most commonly used clip is rect(). Please see this article for details. The compatibility of clip is also good and it is compatible with basic browsers.

clip usage

is only effective for an element whose attribute is set to position:absolute; or position:fixed;.

clip:rect(top,right,bottom,left);

In IE6`7, just remove the comma between the attributes.

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

What if bottom is smaller than top and right is smaller than left? Then the entire picture will be hidden.

It is also important to note that

When the value of left and top is auto, their value is 0px,

When the value of right and bottom is bottom , their default value is 100%;

You need to carefully understand here that the combined right and bottom values ​​are relative to left and top. This should be easier to understand.