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