CSS3 Implementing the Ring progress bar method

The first time to write this ring is the reference to the post on the CSS code, and then according to their own needs to change, found that the ring can be perfect rotation, but it seems unable to use a percentage control, so give up a random copy of a ready-made idea, the dynamic brain is still necessary.

Implementation principle

There are a lot of ways that CSS implements rings, and I think most of them are made with a border (border) + clipping (Clip:rect ()), so I'm prepared to use this approach.

Mainly the layout problem, I think most of the ring progress bar is similar, is the layout and rotation of different ways

HTML <p id= "loading" class= "Loading" > <p class= "Circle" > <p class= "percent left" ></p> <p class= "percent right Wth0" ></p> </p> <p class= "per" ></p></p>//CSS. L  oading {position:fixed;  top:50%;  left:50%;  Overflow:hidden;  z-index:9999;          -webkit-transform:translate ( -50%,-50%); Transform:translate ( -50%,-50%);}.     circle{-webkit-box-sizing:border-box;          -moz-box-sizing:border-box;  Box-sizing:border-box;  border:10px solid #fff; Clip:rect (0,100px,100px,50px);}. clip-auto{clip:rect (auto, auto, auto, Auto);}.     percent{-webkit-box-sizing:border-box;          -moz-box-sizing:border-box;  Box-sizing:border-box;  top:-10px; left:-10px;}.  left{-webkit-transition:-webkit-transform Ease;  Transition:-webkit-transform ease;  Transition:transform ease;  border:10px solid #E54B00; Clip:rect (0,50px,100px,0);}.  right{border:10px solid #E54B00; Clip:rect (0,100px,100px,50px);}.wth0{width:0;} js$ ('. Left '). Animate ({deg:per*3.6}, {step:function (n, FX) {if (per>180) {$ ('. Circle '). Ad            DClass (' Clip-auto ');        $ ('. Right '). Removeclass (' Wth0 ');            } $ (this). css ({"-webkit-transform": "Rotate (" +n+ "deg)", "-moz-transform": "Rotate (" +n+ "deg)",    "Transform": "Rotate (" +n+ "deg)"}); }, duration:500})

Clipping of . Circle (The parent element of the left and right sides of the ring) shows only the ring on the left, the width of the ring to starboard is directly 0, and when the progress bar is 50%, the left ring rotation angle is transform:rotate (180deg) , remove the clipping from . Circle (. Clip-auto), and restore the width of the right ring. This is basically the routine.

The animation method of jquery The Step property of animate ()

If you use only

$ (this). css ({    "-webkit-transform": "Rotate (" +n+ "deg)",    "-moz-transform": "Rotate (" +n+ "deg)",    " Transform ":" Rotate ("+n+" deg) "});

To control the rotation of the angle, no animation appears to be more blunt, it is necessary to consider adding an animation, and JQ provides animate to only numeric values can be animated, and the value of the string type can not create animation.

This is where Animate's step property needs to be used.

Step Introduction

The progress property of animate is what we often use to manipulate the properties of numeric values, but the properties of a string value do not work with it, and the step property is required.

Step decomposition of a piece of animation as the name implies, in the Animate method, each step specifically how to decompose, not by our set CSS property values and animation length to determine, is determined by the system.

$ (". Left"). Animate ({left:50},{    duration:100,    step:function (now,fx) {        Console.log (now)//console output, See how this animation is broken down into a few fragments    }});

This place is mainly about explaining why you are assigning an angle here, and by the way, it is not our man-made control over how many fragments it divides into.

The second parameter of the step method--fx

$ (". Demo"). Animate ({    first:2,    second:10}, {    step:function (N,FX) {        ////////animation elements each animated property is called by the execution of each animation effect. The 1th parameter is the real-time value of the property being changed by the current animation (real-time feedback rendering of the property value during every 1 animation); The 2nd parameter provides an opportunity to modify the Tween object to change the value of the property set in animate 1th parameters at the end of the animation.        //FX:JQUERY.FX a reference to a prototype object that contains a number of properties, such as        //elements that perform the animation: Elem;        Animation is changing the properties: Prop;        Changing the current value of the property: now;        Changing the end value of the property: end;        The unit in which the property is being changed: unit, etc                //Can change the property set in animate 1th parameter second at the end of the animation value        if (fx.prop== "second") {fx.end=5}        Console.log (fx.prop+ ":" +n);    },    duration:2000})

Related recommendations:

A detailed example of a canvas implementation of arc, ring progress bar

Using CSS clip to implement audio playback ring progress bar Tutorial Example

Use CSS3 to make an instance of a ring progress bar