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

最新推荐文章于 2024-05-21 09:38:48 发布

忍者1

最新推荐文章于 2024-05-21 09:38:48 发布

阅读量149

点赞数

分类专栏：前端高级文章标签： vue

原文链接：http://www.mark-to-win.com/tutorial/50777.html

版权

前端高级专栏收录该内容

157 篇文章 0 订阅

订阅专栏

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>

忍者1

关注

0
点赞
踩
0

收藏

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

1、效果预览2、用到的知识主要利用SVG的stroke-dasharray和stroke-dashoffset这两个属性。在看下面文章之前，你需要了解<!DOCTYPE html><html><head> <title>svg demo</title> <style type="text/css"> #line{ transition: all 2s;
复制链接

扫一扫

专栏目录