微信小程序canvas圆形进度条加载动画实现

需要一个圆形进度插件，可以用canvas实现，加载速度与粒度可以自行调节，根据sec 与 speed 进行计算，欢迎交流指导
wxml页面

<view class="loading-warp">
    <canvas class="canvas" canvas-id="canvasCircle"></canvas>
    <canvas class="canvas-mask" canvas-id="canvasRing"></canvas>
    <view class="rate">{{step}}%</view>
</view>
<view class="loading-tips">{{tips}}</view>

wxss部分

/* loading start */
.loading-warp {
    z-index: 0;
    position: relative;
    margin: 100px auto 20px;
    width: 200px;
    height: 200px;
}
.canvas {
    z-index: 1;
    width: 200px;
    height: 200px;
}
.canvas-mask {
    z-index: 2;
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    height: 200px;
}
.rate {
    z-index: 1;
    position: absolute;
    top: 80px;
    left: 0;
    width: 100%;
    text-align: center;
    color: #fff;
    font-size: 40rpx;
}
.loading-tips {
    text-align: center;
    font-size: 40rpx;
    font-weight: 400;
    color: #fff;
}
/* loading end */

js部分

Page({
    data: {
        tips: '加载中',
        step: 0
    },
    onReady: function(){
        var me = this;
        var cxt = wx.createCanvasContext('canvasCircle');
        cxt.setLineWidth(6);
        cxt.setStrokeStyle('#eaeaea');
        cxt.setLineCap('round');
        cxt.beginPath();
        cxt.arc(100, 100, 96, 0, 2 * Math.PI, false);
        cxt.stroke();
        cxt.draw();
        //加载动画
        var steps = 1,startAngle = 1.5 * Math.PI,endAngle = 0,speed = 100,sec = 100;
        function drawing (s, e) {
            var context = wx.createCanvasContext('canvasRing');
            context.setLineWidth(6);
            context.setStrokeStyle('#11be0f');
            context.setLineCap('round');
            context.beginPath();
            context.arc(100, 100, 96, s, e, false);
            context.stroke();
            context.draw();
        }
        function drawLoading (){
            if(steps < 101){
                //这里用me,同步数据,渲染页面
                me.setData({
                    step: steps
                })
                endAngle = steps * 2 * Math.PI / speed + startAngle;
                drawing(startAngle, endAngle);
                steps++;
                console.log(steps);
            }else{
                clearInterval(this.interval);
            }
        }
        this.interval = setInterval(drawLoading,sec);
    }
    
})