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

最新推荐文章于 2024-06-14 09:53:10 发布

冬天爱吃冰淇淋

最新推荐文章于 2024-06-14 09:53:10 发布

阅读量1k

点赞数

分类专栏： css js vue 文章标签： svg vue.js css

本文链接：https://blog.csdn.net/weixin_44823731/article/details/106993796

版权

js 同时被 3 个专栏收录

34 篇文章 0 订阅

订阅专栏

vue

21 篇文章 0 订阅

订阅专栏

css

9 篇文章 1 订阅

订阅专栏

在这里插入图片描述
使用svg和circle来实现进度条。
circle标签的属性：

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>

冬天爱吃冰淇淋

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
vue+svg实现动态圆形进度条

使用svg和circle来实现进度条。circle标签的属性：cx：圆心的x坐标cy：圆心的y坐标r：圆的半径fill：填充的颜色stroke：边框的填充的颜色stroke-width：边框的大小stroke-dasharray：圆的周长2PIRstroke-dashoffset：等于周长就是边框空白，等于0就填充完边框实现原理：画出两个圆，两个园的边框填充颜色不一样，填充第一个园的边框，动态改变第二个元的stroke-dashoffset的值，让它从圆的周长变到0，然后填充完整个边.
复制链接

扫一扫

专栏目录