primers

Mobile terminal to do a loadiing loading icon, with the past are not quite the same, is a ring progress bar, ring progress bar is just, but also have to use percentage control.

CSS3 implements the ring

demo

When I first wrote this ring, I substituted it with the CSS code given in the post, and then changed it according to my own needs. I found that the ring could rotate perfectly, but it seemed that I could not control it with percentage, so I gave up the idea of copying a ready-made one. It was necessary to use my mind.

Realize the principle of

There are many ways to implement circles in CSS. Most of them use border (clip: rect ()) to implement circles, so I am also prepared to use this way.

The main problem is the layout, I see most of the ring progress bar is similar, but the layout and rotation mode is different

// html 

<div id="loading" class="loading">
    <div class="circle">
        <div class="percent left"></div>
        <div class="percent right wth0"></div>
    </div>
    <div class="per"></div>
</div>

// css 

.loading {
  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: the rect (0100 px, 100 px, px 50); } .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: the rect (0, 50 px, 100 px, 0). } .right{ border:10px solid#E54B00;Clip: the rect (0100 px, 100 px, px 50); } .wth0{ width:0; } // js $('.left'.animate({deg: per*3.6}, {step:function(n, fx) {
        if(per>180){
            $('.circle').addClass('clip-auto');
            $('.right').removeClass('wth0');
        }
        $(this).css({
            "-webkit-transform":"rotate("+n+"deg)"."-moz-transform":"rotate("+n+"deg)"."transform":"rotate("+n+"deg)"
        });
    },
    duration:500
})

Copy the code

By clipping.circle(the parent element of the left and right circles), only the left circle is displayed. The width of the right circle is directly 0. When the progress bar reaches 50%, that is, the rotation Angle of the left circle is transform: Rotate (180deg) : The clipping of. Circle is removed (.clip-auto) and the width of the right circle is restored. That’s pretty much the formula.

The step property of jQuery’s animate() animation method

If only use

$(this).css({
    "-webkit-transform":"rotate("+n+"deg)"."-moz-transform":"rotate("+n+"deg)"."transform":"rotate("+n+"deg)"
});
Copy the code

Jq’s animate pair allows you to animate only numeric values, not string values.

You need to use the animate Step property.

Step is introduced

The animate progress property is commonly used to manipulate numeric values, but not string values, where the step property is required.

In the animate method, how each step is decomposed is determined by the system, not by the CSS property values and animation duration.

$(".left").animate({left:50},{
    duration:100,
    step:function(now,fx){console.log(now) // console output to see the animation broken up into several fragments}});Copy the code

This place is mainly to explain why the Angle is assigned here, and by the way, it is not up to us to control how many pieces it divides into.

The second argument to the step method, fx

$(".demo").animate({
	first:2,
	second:10
}, {
	step:function(n,fx){// The function to be called for each animation property of an animation element each time the animation effect is executed. The first parameter is the real-time value of the property that the animation is currently changing (the real-time feedback of the property value during each animation). The second argument provides an opportunity to modify the Tween object to change the value of the property set in animate 1 at the end of the animation. // fx: a reference to the jquery. fx prototype object, which contains attributes such as // the element that performs the animation: elem; // Animation is changing properties: prop; // Changing the current value of the property: now; // Changing the end value of the property: end; // The unit in which the attribute is being changed: unit; // You can change the value of the second property set in animate 1 at the end of the animationif(fx.prop=="second"){fx.end=5}
		console.log(fx.prop+":"+n);
	},
	duration:2000
})
Copy the code

The end of the

In this animation, I encountered two knowledge blind spots: the application of clip and the STEP attribute of JQ. The main purpose of writing this article is to deepen understanding and share.

reference

  • Jquery Animate Step implements CSS3 animate properties
  • Step and Progress properties of jQuery animate()
  • Talk about the use of CSS3 to make the ring progress bar