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

最新推荐文章于 2023-10-13 17:27:11 发布

Vam的金豆之路

最新推荐文章于 2023-10-13 17:27:11 发布

阅读量2.1w

点赞数 5

分类专栏： Vue.js

本文链接：https://blog.csdn.net/qq_39045645/article/details/103314741

版权

Vue.js 专栏收录该内容

85 篇文章 21 订阅

订阅专栏

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.js
import 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>

Vam的金豆之路

关注

5
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
3
评论
封装环形加载进度条（Vue插件版和原生js版）

Vue版<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>vue</title> <style> html, body { display: flex; ...
复制链接

扫一扫