vue+svg实现动态圆形进度条

使用svg和circle来实现进度条。
circle标签的属性：javascript

cx：圆心的x坐标
cy：圆心的y坐标
r：圆的半径
fill：填充的颜色
stroke：边框的填充的颜色
stroke-width：边框的大小
stroke-dasharray：圆的周长2PIR
stroke-dashoffset：等于周长就是边框空白，等于0就填充完边框
实现原理：画出两个圆，两个园的边框填充颜色不同，填充第一个园的边框，动态改变第二个元的stroke-dashoffset的值，让它从圆的周长变到0，而后填充完整个边框。
所有代码：

<!DOCTYPE html>
<html lang="en">

<head>

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>SVG实现圆形进度条</title>
        <script src="https://unpkg.com/vue/dist/vue.js"></script>
        <style>
            #app { 
 
   
                width: 300px;
                height: 300px;
                margin: 0 auto;
                margin-top: 300px;
            }

            svg { 
 
   
                width: 400px;
                height: 400px;
            }

            svg circle { 
 
   
                transform-origin: 100px 100px;
                transform: rotate(-90deg)
            }
        </style>
    </head>
</head>

<body>
    <div id="app">
        <svg ref="svg">
            <circle cx="100" cy="100" r="50" fill="transparent" stroke="#c09d31" stroke-width="5" stroke-dasharray="314"
                stroke-dashoffset="0"></circle>
            <circle cx="100" cy="100" r="50" fill="transparent" stroke="#ffcd32" stroke-width="5" stroke-dasharray="314"
                :stroke-dashoffset="offset">
            </circle>
        </svg>
    </div>
</body>
<script>
    new Vue({ 
 
   
        el: '#app',
        data: { 
 
   
            offset: 314
        },
        mounted() { 
 
   
            this.interval = setInterval(() => { 
 
   
                this.offset--
            }, 100)
        },
        watch: { 
 
   
            offset(newval) { 
 
   
                if (newval <= 0) { 
 
   
                    window.clearInterval(this.interval)
                }
            }
        }
    })
</script>

</html>

本文分享 CSDN - 冬天爱吃冰淇淋。
若有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一块儿分享。html