封装环形加载进度条（Vue插件版和原生js版）
1、效果预览
在这里插入图片描述
2、用到的知识
主要利用SVG的stroke-dasharray和stroke-dashoffset这两个属性。
在看下面文章之前，你需要了解
12<!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>
12345678910111213141516171819202122232425262728293031323334353637383、使用
有两种方式，一种是直接安装即可使用，一种需要封装。选一种适合自己的即可。
1（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>
1234567891011121314151617181920（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>
1234567891011121314151617181920212223242526272829303132更多内容请见原文，原文转载自:https://blog.csdn.net/weixin_44519496/article/details/119327892
本文系转载，前往查看
如有侵权，请联系?cloudcommunity@tencent.com 删除。
本文系转载，前往查看
如有侵权，请联系?cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读