jq实现环形渐变百分比进度条

jq环形渐变百分比进度条效果：

引入

//通过下方链接1下载插件再引入

html代码

    

        

            

            
正在通过箱体指标模型计算股票成长空间
        
    

js代码

function create_circle(num, val_num) {

       
        $('#circle_step5').circleProgress({
            value: val_num,
            size: 155,
            startAngle: -1.57,
            reverse: false,
            lineCap: 'round',
            thickness: 20,
            fill: {
                gradient: ["#38a256", "#f58c08", "#ec2e2a"],
                gradientAngle: Math.PI / 4 
            },
            animation: {
                duration: 2800
            },
        }).on('circle-animation-progress', function (event, progress, stepValue) {

            $(this).find('strong').html(String((stepValue * 100).toFixed(2)) + '%');
            // $(this).next('p').html("正在量价交易模型计算股票拉抬趋势")

        });
        setTimeout(function (e) {
            $("#circle_step5").next('p').html("正在量价交易模型计算股票拉抬趋势")
        }, 700);
        setTimeout(function (e) {
            $("#circle_step5").next('p').html("正在通过VAR数据系统确认风险值")
        }, 1400);
        setTimeout(function (e) {
            $("#circle_step5").next('p').html("正在通过最小二乘法OLS确定必要报酬率")
        }, 2100);
        setTimeout(function (e) {
            $("#circle_step5").next('p').html("正在通过BIAS乖离率确定股票买卖点位")
        }, 2800);

    }

    create_circle(1, 0.96);

    create_circle(2, 0.75);

    create_circle(3, 1);

    create_circle(4, 0.96);

    create_circle(5, 1);

    create_circle(6, 1);

css代码

.circle_step_box {
            width: 1200px;
            margin: 0 auto;
        }

        .circle_step {
            width: 155px;
            height: auto;
            float: left;
            margin-left: 54px;
            cursor: pointer;
        }

        .circle_step>div {
            width: 155px;
            height: 155px;
            position: relative;
        }

        .circle_step>div>strong {
            font-size: 26px;
            color: #000;
            position: absolute;
            top: 60px;
            text-align: center;
            display: block;
            width: 100%;
            left: 0;
        }

        .circle_step>div>strong>i {
            font-size: 18px;
        }

        /* .circle_step.active>div>strong{color:#feab11;} */

        .circle_step>p {
            font-size: 16px;
            width: 130px;
            text-align: center;
            margin: 0 auto;
            margin-top: 20px;
            color: #000;
        }

总结：需要自定义滚动条可参考以下链接

链接1  jquery-circle-progress是一款带渐变色的圆形进度条动画特效jQuery插件：

http://www.htmleaf.com/html5/html5-canvas/201505271918.html

链接2  使用jquery-circle-progress绘制canvas渐变环形进度条

https://blog.csdn.net/weixin_41187842/article/details/80900382 

链接3   jquery-circle-progressAPI文档

https://www.axihe.com/edu/jquery-plugin/layout/jquery-circle-progress.html