A nice ring percentage animation

var p1 = new Progress({

     el:  'my_html' ,  //canvas元素id

     deg: 100,  //绘制角度

     timer: 8,  //绘制时间

     lineWidth: 5,  //线宽

     lineBgColor:  '#BBBBBB' ,  //底圆颜色

     lineColor:  'white' ,  //动态圆颜色

     textColor:  '#BBBBBB' ,  //文本颜色

     fontSize: 22,  //字体大小

     circleRadius: 50  //圆半径

});

Save the following plug-ins for

progress.js can be called directly

let Progress = function(init){
    this.init(init)
};
Progress.prototype= {
    init:function (init) {

        the this .el = init.el; // element ID 

        the let cvsElement = document.getElementById ( the this .el), // Get element 
            CTX = cvsElement.getContext ( "2D"), // Get the brush 
            width = cvsElement.width, / / element width 
            height = cvsElement.height, // element height 
            degActive = 0, // dynamic line 
            timer = null ; // timer
        
        // angle stop
        init.deg> 0 && init.deg <= 100?
            this .deg = init.deg: this .deg = 100 ;
        
        // width
        init.lineWidth !== undefined?
            this.lineWidth = init.lineWidth : this.lineWidth =20;

        // determine the width and height of the smaller of 
        the this .wh width => height? Height: width;

        // set the radius of the circle, the default is the aspect smaller 
        init.circleRadius> 0 && init.circleRadius <= the this .wh / 2-this.lineWidth / 2?
             The this .circleRadius = init.circleRadius: the this .circleRadius = the this .wh /2-this.lineWidth/2 ;

        // draw the background color of the line
        init.lineBgColor !==undefined?
            this.lineBgColor = init.lineBgColor:this.lineBgColor='#ccc';

        // color line drawing
        init.lineColor !==undefined?
            this.lineColor = init.lineColor:this.lineColor='#009ee5';

        // Draw text color
        init.textColor !==undefined?
            this.textColor = init.textColor:this.textColor='#009ee5';

        // Draw Text Size
        init.fontSize !==undefined?
            this.fontSize = init.fontSize:this.fontSize=parseInt(this.circleRadius/2);

        // execution time of 
        the this .timer = init.timer;

        // Clear sawtooth 
        IF (window.devicePixelRatio) {
            cvsElement.style.width = width + "px";
            cvsElement.style.height = height + "px";
            cvsElement.height = height * window.devicePixelRatio;
            cvsElement.width = width * window.devicePixelRatio;
            ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
        }

        // set the line width 
        ctx.lineWidth = the this .lineWidth;

        // start timer 
        Timer = the setInterval ( function () {
            ctx.clearRect ( 0,0, width, height); // Clear canvas 
            ctx.beginPath (); // begin drawing the bottom circle 
            ctx.arc (width / 2, height / 2, the this .circleRadius, 1,8 );
            ctx.strokeStyle=this.lineBgColor;
            ctx.stroke();
            ctx.beginPath (); // begin drawing a circle dynamic 
            ctx.arc (width / 2, height / 2, the this .circleRadius, -Math.PI / 2, degActive Math.PI * / 180 [-Math.PI / 2);
            ctx.strokeStyle=this.lineColor;
            ctx.stroke();
            TXT the let = (the parseInt (degActive * 100/360) + "%"); // Get percentage
            ctx.font=this.fontSize+"px SimHei";
            W the let =, ctx.measureText (TXT) .width; // get the text width of 
            the let H = the this .fontSize / 2;
            ctx.fillStyle=this.textColor;
            ctx.fillText(txt,width/2-w/2,height/2+h/2);
            if(degActive>=this.deg/100*360){//停止定时器
                clearInterval(timer);
                h = null ;
            }
            degActive++;
        }.bind(this),this.timer);
    }
 };