2、用到的知识
主要利用SVG的stroke-dasharray和stroke-dashoffset这两个属性。
在看下面文章之前，你需要了解
<!DOCTYPE html> <html> <head> <title>svg demo</title> <style type="text/css"> #line{ transition: all 2s; stroke-dasharray:300,320; stroke-dashoffset:300; } svg:hover #line{ stroke-dashoffset: 0; } #circle{ transition: all 2s; stroke-dasharray:314,314; stroke-dashoffset:314; } svg:hover #circle{ stroke-dashoffset:0; } </style> </head> <body> <h3>线段区域</h3> <svg > <line x1="30" y1="30" x2="300" y2="30" stroke-width="20" stroke="red" /> </svg> <h3>圆区域</h3> <svg viewBox="0 0 200 200"> <circle cx="100" cy="80" r="50" fill="gray" stroke-width="5" stroke="green" /> </svg> </body> </html>
3、使用
有两种方式，一种是直接安装即可使用，一种需要封装。选一种适合自己的即可。
（1）、安装插件
安装Vue插件
npm install loading-vue-component
使用
// main.js import loading from 'loading-vue-component' Vue.use(loading)
// app.vue <template> <div> <loading :radius="20" :progress="progress" :stroke="2" :color='color'></loading> </div> </template> <script> export default { name: 'app', data() { return { progress: 0,color:'#1989fa'} } } </script>
（2）、封装插件
Vue版
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>loading</title> <style> html, body { display: flex; align-items: center; justify-content: center; height: 100%; position: relative; margin: 0; padding: 0; } circle { transition: stroke-dashoffset 0.15s; transform: rotate(-90deg); transform-origin: 50% 50%; } .txt{ font-size: 14px; text-align: center; } .loading{ padding:40vh; } </style> </head> <body> <div></div> </body> <script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script> <script> // 子组件 const Loading = Vue.component('Loading', { props: { radius: Number, progress: Number, stroke: Number, color:String }, data() { const progressed = this.progress; const colored = this.color const normalizedRadius = this.radius - this.stroke * 2; // 净半径，总半径-2*路径宽 const circumference = normalizedRadius * 2 * Math.PI; // 周长，2πd return { normalizedRadius, circumference, progressed, colored }; }, mounted() { // emulating progress const interval = setInterval(() => { this.progressed += 25; if (this.progressed > 101) { this.colored='white' } this.colored='#1989fa' }, 150); }, computed: { strokeDashoffset() { return this.circumference - this.progressed / 100 * this.circumference; } }, template: ` <div> <svg :height="radius * 2" :width="radius * 2" > <circle :stroke="color" :stroke-dasharray="circumference + ' ' + circumference" :style="{ strokeDashoffset: strokeDashoffset }" :stroke-width="stroke" fill="transparent" :r="normalizedRadius" :cx="radius" :cy="radius" /> </svg> <p>加载中</p> </div> ` }); // 父组件 new Vue({ el: '#example', components: { 'Loading': Loading }, data() { return { progress: 0,color:'#1989fa',show:true} }, mounted () { setTimeout(() => { this.show = false },3000) }, template: ` <div> <Loading :radius="20" :progress="progress" :stroke="2" :color='color' v-show='show'></Loading> </div> ` }); </script> </html>
原生js版
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>progress</title> <style> html, body { background-color: #333; display: flex; align-items: center; justify-content: center; height: 100%; position: relative; } .progress-ring__circle { transition: 0.35s stroke-dashoffset; transform: rotate(-90deg); transform-origin: 50% 50%; } input { position: fixed; top: 10px; left: 10px; width: 80px; } </style> </head> <body> <svg> <circle stroke="white" stroke-width="4" fill="transparent" r="52" cx="60" cy="60" /> </svg> <input value="35" type="number" step="5" min="0" max="100" placeholder="progress"> </body> <script type="text/javascript"> var circle = document.querySelector('circle'); var radius = circle.r.baseVal.value; var circumference = radius * 2 * Math.PI; circle.style.strokeDasharray = `${circumference} ${circumference}`; circle.style.strokeDashoffset = `${circumference}`; function setProgress(percent) { const offset = circumference - percent / 100 * circumference; circle.style.strokeDashoffset = offset; } const input = document.querySelector('input'); setProgress(input.value); input.addEventListener('change', function(e) { if (input.value < 101 && input.value > -1) { setProgress(input.value); } }) </script> </html>