svg实现渐变进度圆环

效果图
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>svg 圆形进度条</title>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <style>
    body {
        margin: 0;
        padding: 0;
        font-family: Arial, "微软雅黑", "宋体", sans-serif;
        background: #e6eaeb;;
    }

    .alert-box {
        position: relative;
        display: block;
        width: 286px;
        margin: 96px auto 0;
        padding: 180px 85px 22px;
        text-align: center;
        color: #fff;
        border-radius: 10px 10px 0 0;
        background: #fff;
        box-shadow: 5px 9px 17px rgba(102, 102, 102, .75);
    }
    .alert-box p {
        margin: 0;
    }
    .alert-circle {
        position: absolute;
        top: -50px;
        left: 130px;
    }
    .alert-sec-circle {
        transition: stroke-dashoffset .2s linear;
        /* stroke-dashoffset: -440; */
        stroke-dasharray: 735;
    }
    .alert-sec-unit {
        font-size: 34px;
    }
    #circle-txt {
        position: absolute!important;
        bottom: 137px;
        left: 172px;
        width: 102px;
        font-size: 40px;
        text-align: center;
    }
    </style>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0">
</head>
<body>
    <div id="js-alert-box" class="alert-box">
        <svg class="alert-circle" width="180" height="180">
            <defs>
                <lineargradient id="linear" x1="0%" y1="0%" x2="100%" y2="0%">
                    <stop offset="0%" stop-color="#F2412A"></stop>
                    <stop offset="100%" stop-color="#FFD000"></stop>
                </lineargradient>
            </defs>
            <circle cx="90" cy="90" r="78" fill="#3BA7F3" stroke="url(#linear)" stroke-width="8"></circle>
            <circle cx="90" cy="90" id="js-sec-circle" class="alert-sec-circle" r="78" fill="transparent" stroke="#F4F1F1" stroke-width="9" transform="rotate(-90 90 90)"></circle>
        </svg>
        <div id="circle-txt">
            100%
        </div>
    </div>
</body>
<script>
setProgress(70);
function setProgress(num, r = 78) {
    document.getElementById('circle-txt').innerHTML = num + '%';
    document.getElementById('js-sec-circle').setAttribute('stroke-dashoffset', -2 * Math.PI * r * num / 100);
}
</script>
</html>
致谢参考

敬请参考 https://github.com/jasonChen2014/svgProgessBar/blob/master/index.html
svg实现渐变进度圆环

致谢参考

猜你喜欢
