环形加载进度条封装（Vue插件版和原生js版）

时间：2021-05-18

本文实例为大家分享了环形加载进度条封装代码，供大家参考，具体内容如下

1、效果预览

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 width="100%" height="40" > <line id="line" x1="30" y1="30" x2="300" y2="30" stroke-width="20" stroke="red" /></svg> <h3>圆区域</h3><svg width="200" height="200" viewBox="0 0 200 200"> <circle id="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.jsimport loading from 'loading-vue-component'Vue.use(loading)// app.vue<template> <div id="app"> <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 id="example"></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 class='loading'> <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 class='txt'>加载中</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 class="progress-ring" width="120" height="120"> <circle class="progress-ring__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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章