CSS静态百分比圆环图demo

最新推荐文章于 2025-06-04 13:51:21 发布

转载最新推荐文章于 2025-06-04 13:51:21 发布 · 3.5k 阅读

文章标签：

#百分比圆环图

本文详细介绍如何使用CSS3创建一个动态的圆形滚动进度条，包括动画效果的实现及百分比显示。通过调整边框样式和旋转角度，可以实现不同状态的进度显示。

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

详解用CSS3制作圆形滚动进度条动画效果 https://www.cnblogs.com/jr1993/p/4677921.html

CSS圆环百分比DEMO https://www.cnblogs.com/justbeginning/p/7231000.html

这个demo第二个参考的删减无加载动画版本

<div class="circleProgress_wrapper" id="circle1">
    <div class="wrapper right">
        <div class="circleProgress rightcircle"></div>
    </div>
    <div class="wrapper left">
        <div class="circleProgress leftcircle"
                                 style="transform: rotate(45deg);border-top: 5px solid rgb(204, 204, 204);border-right: 5px solid rgb(204, 204, 204);"></div>
        </div>
        <span class="express-text">得分</span>
        <span class="percent" int-percent="72.2">72.2</span>
</div>


/* 圆环 */
.circleProgress_wrapper {
    display: flex;
    flex-direction: column;
    width: 80px;
    min-width: 80px;
    height: 80px;
    margin: 0;
    position: relative;
    justify-content: center;
    align-items: center;
}

.wrapper {
    width: 40px;
    height: 80px;
    position: absolute;
    top: 0;
    overflow: hidden;
}

.right {
    right: 0;
}

.left {
    left: 0;
}

.circleProgress {
    width: 80px;
    height: 80px;
    border: 6px solid transparent;
    border-radius: 50%;
    position: absolute;
    top: 0;
    -webkit-transform: rotate(45deg);
}

.rightcircle {
    border-top: 6px solid #ccc;
    border-right: 6px solid #ccc;
    border-left: 6px solid #ccc;
    border-bottom: 6px solid #ccc;
    right: 0;
}

.leftcircle {
    border-bottom: 6px solid #ccc;
    border-left: 6px solid #ccc;
    border-top: 6px solid #ccc;
    border-right: 6px solid #ccc;
    left: 0;
}

span.express-text {
    font-size: 12px;
    margin-top: 2px;
    color: #888;
}

span.percent {
    margin-top: -3px;
    font-size: 18px;
    font-weight: bold;
}

var deg = {percent: 100, left: 225, leftBC: "#ccc", right: 225, rightBC: "#ccc"};
    var pint;
    var percent = 0;
    $(function () {
        var arr = $('.percent');
        var circle = $('.circleProgress_wrapper');
        colors = [
            "#FC983B",
            "#ED93B5",
            "#32A6A3"
        ];
        if (arr.length != circle.length) {
            alert("出错了！")
        } else {
            for (var i = 0; i < arr.length; i++) {
                var itemDeg = arr[i].innerHTML;
                var circleId = circle[i].id;
                loadPercent(itemDeg, circleId,colors[i]);
            }
        }

    });


    function loadPercent(percent, id,color) {
        var allDeg = countDegByPercent(percent);
        if (allDeg >= 180) {
            var tmpDeg = allDeg - 180;
            deg.left = 45 + tmpDeg;
            deg.right = 225
            deg.leftBC = color;
            deg.rightBC = color;
        } else {
            deg.right = 45 + allDeg;
            deg.rightBC = color;
            deg.leftBC = "#ccc";
        }
        //console.log(deg);
        $("#" + id + " .rightcircle").css({
            "-webkit-transform": "rotate(" + deg.right + "deg)",
            "border-left": "6px solid " + deg.rightBC,
            "border-bottom": "6px solid " + deg.rightBC
        });
        $("#" + id + " .leftcircle").css({
            "-webkit-transform": "rotate(" + deg.left + "deg)",
            "border-top": "6px solid " + deg.leftBC,
            "border-right": "6px solid " + deg.leftBC
        });
    }

    function countDegByPercent(percent) {
        return percent * 3.6;
    }