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


Posted in Javascript onDecember 04, 2019

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

1、效果预览

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

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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
extjs form textfield的隐藏方法
Dec 29 Javascript
JQuery跨Iframe选择实现代码
Aug 19 Javascript
javascript 单例/单体模式(Singleton)
Apr 07 Javascript
javascript中的原型链深入理解
Feb 24 Javascript
JavaScript实现MIPS乘法模拟的方法
Apr 17 Javascript
js实现带缓冲效果的仿QQ面板折叠菜单代码
Sep 06 Javascript
js如何改变文章的字体大小
Jan 08 Javascript
jQuery中each()、find()和filter()等节点操作方法详解(推荐)
May 25 Javascript
JavaScript——DOM操作——Window.document对象详解
Jul 14 Javascript
使用重写url机制实现验证码换一张功能
Aug 01 Javascript
微信小程序列表时间戳转换实现过程解析
Oct 12 Javascript
关于React Native 无法链接模拟器的问题
Jun 21 Javascript
element-ui 远程搜索组件el-select在项目中组件化的实现代码
Dec 04 #Javascript
在vue和element-ui的table中实现分页复选功能
Dec 04 #Javascript
vue项目中极验验证的使用代码示例
Dec 03 #Javascript
jQuery轮播图功能制作方法详解
Dec 03 #jQuery
JS实现的雪花飘落特效示例
Dec 03 #Javascript
vue中实现高德定位功能
Dec 03 #Javascript
node静态服务器实现静态读取文件或文件夹
Dec 03 #Javascript
You might like
laravel框架select2多选插件初始化默认选中项操作示例
2020/02/18 PHP
[HTML/CSS/Javascript]WWTJS
2007/09/25 Javascript
为JavaScript添加重载函数的辅助方法
2010/07/04 Javascript
精心挑选的15款优秀jQuery 本特效插件和教程
2012/08/06 Javascript
onclick与listeners的执行先后问题详细解剖
2013/01/07 Javascript
解析Javascript中难以理解的11个问题
2013/12/09 Javascript
JavaScript定义类的几种方式总结
2014/01/06 Javascript
Jquery在指定DIV加载HTML示例代码
2014/02/17 Javascript
浅析jQuery中调用ajax方法时在不同浏览器中遇到的问题
2014/06/11 Javascript
原生javascript实现简单的datagrid数据表格
2015/01/02 Javascript
jQuery在线选座位插件seat-charts特效代码分享
2015/08/27 Javascript
javascript生成img标签的3种实现方法(对象、方法、html)
2015/12/25 Javascript
jquery 无限极下拉菜单的简单实例(精简浓缩版)
2016/05/31 Javascript
详解Vue双向数据绑定原理解析
2017/09/11 Javascript
JavaScript数据结构之单链表和循环链表
2017/11/28 Javascript
element-ui 中的table的列隐藏问题解决
2018/08/24 Javascript
vue限制输入框只能输入8位整数和2位小数的代码
2019/11/06 Javascript
javascript贪吃蛇游戏设计与实现
2020/09/17 Javascript
jquery自定义组件实例详解
2020/12/31 jQuery
在GitHub Pages上使用Pelican搭建博客的教程
2015/04/25 Python
在Python中操作字符串之replace()方法的使用
2015/05/19 Python
Python中使用Queue和Condition进行线程同步的方法
2016/01/19 Python
python里使用正则的findall函数的实例详解
2017/10/19 Python
Python中的 enum 模块源码详析
2019/01/09 Python
pandas通过字典生成dataframe的方法步骤
2019/07/23 Python
python飞机大战pygame碰撞检测实现方法分析
2019/12/17 Python
Python datetime 格式化 明天,昨天实例
2020/03/02 Python
Python发送邮件封装实现过程详解
2020/05/09 Python
Python利用命名空间解析XML文档
2020/08/10 Python
详解用python -m http.server搭一个简易的本地局域网
2020/09/24 Python
Numpy中的数组搜索中np.where方法详细介绍
2021/01/08 Python
会计应聘求职信范文
2013/12/17 职场文书
企业办公室岗位职责
2014/03/12 职场文书
Vue实现导入Excel功能步骤详解
2021/07/03 Vue.js
Python实现自动玩连连看的脚本分享
2022/04/04 Python
Python各协议下socket黏包问题原理
2022/04/12 Python