svg 圆形进度条 

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <title>svg 圆形进度条</title>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0">
</head>

<body>
    <svg class="alert-circle" width="120" height="150">
        <defs>
            <lineargradient id="linear" x1="100%" y1="0%" x2="0%" y2="0%">
                <stop offset="0%" stop-color="#fdde73"></stop>
                <stop offset="100%" stop-color="#ff862c"></stop>
            </lineargradient>
        </defs>
        <g>
            <circle cx="60" cy="56" r="31" fill="none" stroke="rgba(0,0,0,0.1)" stroke-width="6"></circle>
        </g>

        <g transform="rotate(-90 60 56)">
            <circle cx="60" cy="56" r="32" transition="stroke-dashoffset .2s linear" stroke-dasharray="201,201"
                fill="none" stroke="url(#linear)" stroke-width="7" id="js-sec-circle"></circle>
        </g>
    </svg>
</body>
<script>
    setProgress(-76);
    function setProgress(num, r = 32) {
        var maxValue = 2 * Math.PI * r;
        document.getElementById('js-sec-circle').setAttribute('stroke-dashoffset', (maxValue * num / 100) - maxValue);
    }
</script>

</html>

效果

 

posted on 2020-11-23 16:10  阿政kris*  阅读(80)  评论(0)  编辑  收藏  举报