css3 method to implement ring progress bar

When I first started writing this ring, I referred to 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 it couldn't be controlled by percentage, so I gave up and copied it casually. A ready-made idea, it is still necessary to use your brain.

Implementation Principle

There are many ways to implement circles in css. I think most of them are implemented by using border (border) + clipping (clip: rect ()), so I am also prepared Take this approach.

It’s mainly a layout issue. I think most of the ring progress bars are similar, but the layout and rotation methods are different.

// 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 

.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: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').addClass('clip-auto');
            $('.right').removeClass('wth0');
        }
        $(this).css({
            "-webkit-transform":"rotate("+n+"deg)",
            "-moz-transform":"rotate("+n+"deg)",
            "transform":"rotate("+n+"deg)"
        });
    },
    duration:500
})

By changing the parent of the left and right circles The cropping of element) only displays the ring on the left, and the width of the ring on the right is directly 0. When the progress bar reaches 50%, the rotation angle of the left ring is transform: rotate (180deg), remove the clipping of .circle(.clip-auto), and restore the width of the right circle. This is basically the routine.

The step attribute of jQuery's animation method animate()

If you only use

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

to control the rotation of the angle, it will look stiff without any animation. At this time, you must consider Add an animation to it, but the

animate provided by jq can only create animations for numeric values, but cannot create animations for string type values.

At this time, you need to use the step attribute of animate.

step introduction

The progress attribute of animate is often used by us to operate the attributes of numeric values, but the attributes of string values ​​cannot be operated with it. At this time, it is necessary step attribute.

step, as the name suggests, is to decompose an animation into steps. In the animate method, how each step is decomposed is not determined by the CSS property values ​​and animation duration we set, but by the system. of.

$(".left").animate({left:50},{
    duration:100,
    step:function(now,fx){
        console.log(now) //控制台输出，看看这个动画被分解成了几个片段
    }
});

This place mainly explains why the angle is assigned a value here. By the way, how many fragments it divides the value into is not under our human control.

The second parameter of the step method——fx

$(".demo").animate({
    first:2,
    second:10
}, {
    step:function(n,fx){
        // 动画元素的每个动画属性每一次动画效果的执行都将调用的函数。第1个参数是当前动画正在改变的属性的实时值（每1次动画过程中，属性值的实时反馈呈现）；第2个参数为修改Tween 对象提供了一个机会来改变animate第1个参数中设置的属性在动画结束时的值。
        // fx: jQuery.fx 原型对象的一个引用,其中包含了多项属性,比如
        // 执行动画的元素：elem;
        // 动画正在改变的属性：prop;
        // 正在改变属性的当前值：now;
        // 正在改变属性的结束值：end;
        // 正在改变属性的单位：unit;等
        
        // 可在这里改变animate第1个参数中设置的属性second在动画结束时的值
        if(fx.prop=="second"){fx.end=5}
        console.log(fx.prop+": "+n);
    },
    duration:2000
})

Related recommendations:

Detailed explanation of the instance method of canvas to implement arc and ring progress bars

Use CSS clip to implement audio playback ring progress bar tutorial example

Use css3 to make a ring progress bar example

The above is the detailed content of css3 method to implement ring progress bar. For more information, please follow other related articles on the PHP Chinese website!