jq实现环形渐变百分比进度条_circleprogress.js 下载-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_44828153/article/details/107914404

本文介绍如何使用jq和jquery-circle-progress插件创建环形渐变百分比进度条效果，包括HTML、JS和CSS代码示例，以及动态更新进度条文字的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

引入

<script src="js/jquery-1.8.3.min.js"></script>
//通过下方链接1下载插件再引入
<script src="jquery-circle-progress/dist/circle-progress.js"></script>

html代码

    <div class="circle_step_box">
        <div class="circle_step" state='-1' press_name='circle_step5'>
            <div id="circle_step5"><strong></strong></div>
            <p>正在通过箱体指标模型计算股票成长空间</p>
        </div>
    </div>

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)) + '<span>%</span>');
            // $(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.youkuaiyun.com/weixin_41187842/article/details/80900382

链接3 jquery-circle-progressAPI文档

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