CSS3 Implementing a circular progress bar

Introduced

Idle to Nothing, went to the Css3plus website stroll, found a very interesting implementation of the--CSS3 progress bar. A cursory look at the code, found that the principle is actually very simple, not difficult to understand.

Now let's talk about the principle and implement a 1s update progress bar.

The technical details are this: the progress bar consists of two half-rings, first of all our task is to achieve the left and right two half-circle. A ring can be implemented with Border-radius, which means that the party

IE8. You can use clip to complete the clipping of the entire ring, using the Rotate function to complete the rotation of the ring, by setting the rotation angle of the two half-circle to achieve the display of different progress values.

The clip property is the Css2 property, which is supported by all browsers. There are a few key points to note for clip: first, the element using the clip attribute must be absolute or fixed-positioned

element, which means that it must be out of the document flow, and second, the function that clip can use is currently only rect (Top,right,bottom,left), which passes 4 values, where top is the clipping area distance

The distance from the top of the element, set to auto, by default to the value of 0,right to the left edge of the element at the clip area, auto defaults to the right end of the element, and bottom to the cropped area distance element

The value at the top of the element, auto defaults to the bottom of the elements, left to the distance from the element to the side, and auto defaults to 0.

Realize

　　

. Wrap{position:relative;width:200px;Height:200px;Border-radius:50%;background:#CCFFFF;text-align:Center;}. Right-part{width:200px;Height:200px;position:Absolute;Clip:rect (0px,auto,auto,100px)}. Right{width:200px;Height:200px;position:Absolute;Border-radius:50%;background:#003366;Clip:rect (0px,auto,auto,100px);}. R-shadow{width:150px;Height:150px;Border-radius:50%;background:#fff;position:Absolute; Left:25px;Top:25px;}. Left-part{width:200px;Height:200px;position:Absolute;Clip:rect (0px,100px,auto,0px)}. Left{width:200px;Height:200px;position:Absolute;Border-radius:50%;background:#003366;Clip:rect (0px,100px,auto,0px);}. L-shadow{width:150px;Height:150px;Border-radius:50%;background:#fff;position:Absolute; Left:25px;Top:25px;}#desc{Display:Inline-block;width:200px;Height:200px;Line-height:200px;font-size:56px;position:Absolute; Left:0;}

     <Divclass= "Wrap">        <Divclass= "Right-part">            <Divclass= "Right"ID= "Right"></Div>            <Divclass= "R-shadow"></Div>        </Div>        <Divclass= "Left-part">            <Divclass= "Left"ID= "Left"></Div>            <Divclass= "L-shadow"></Div>        </Div>        <spanID= "desc">Ad</span>    </Div>

      functionProgressBar (percentage) {varp = math.round (percentage * 100); vardeg = p * 3.6; varright = document.getElementById ("Right"), left= document.getElementById ("left"), desc= document.getElementById ("desc"); if(P > P | | P < 0) = 100; if(Deg <= 180) {Right.style.cssText= "Transform:rotate (" + (deg-180) + "deg);"Left.style.cssText= "background: #CCFFFF;"            }Else{Right.style.cssText= "Transform:none;"Left.style.cssText= "background: #003366; Transform:rotate (" + (deg-360) + "deg);"            }            if(desc.innertext) {Desc.innertext= p+ "%"            }            if(desc.textcontent) {desc.textcontent= p+ "%"; }        }        varG = 0; SetTimeout (function_a () {if(g>1)return;            ProgressBar (g); G+ = 0.1setTimeout (_a,1000)        },1000)

CSS3 Implementing a circular progress bar