环形加载进度条封装(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 相关文章推荐
js的写法基础分析
Jan 17 Javascript
js字符串截取函数substr substring slice使用对比
Nov 27 Javascript
jQuery实现购物车表单自动结算效果实例
Aug 10 Javascript
深入探讨javascript函数式编程
Oct 11 Javascript
解决ztree搜索中多级菜单展示不全问题
Jul 05 Javascript
JS排序算法之希尔排序与快速排序实现方法
Dec 12 Javascript
vue自定义filters过滤器
Apr 26 Javascript
微信小程序组件传值图示过程详解
Jul 31 Javascript
浅谈layui里的上传控件问题
Sep 26 Javascript
JavaScript对象属性操作实例解析
Feb 04 Javascript
解决ant Design中this.props.form.validateFields未执行的问题
Oct 27 Javascript
JavaScript实现网页下拉菜单效果
Nov 20 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
PHP的中问验证码
2006/11/25 PHP
深入apache host的配置详解
2013/06/09 PHP
php堆排序(heapsort)练习
2013/11/13 PHP
几个优化WordPress中JavaScript加载体验的插件介绍
2015/12/17 PHP
详解yii2使用多个数据库的案例
2017/06/16 PHP
php对微信支付回调处理的方法
2018/08/23 PHP
PHP程序守护进程化实现方法详解
2020/07/16 PHP
jQuery第三课 修改元素属性及内容的代码
2010/03/14 Javascript
javascript检测对象中是否存在某个属性判断方法小结
2013/05/19 Javascript
javascript日期对象格式化为字符串的实现方法
2014/01/14 Javascript
jQuery中对未来的元素绑定事件用bind、live or on
2014/04/17 Javascript
再谈Jquery Ajax方法传递到action(补充)
2014/05/12 Javascript
js实现超酷的照片墙展示效果图附源码下载
2015/10/08 Javascript
JavaScript实现刷新不重记的倒计时
2016/08/10 Javascript
AngularJS自定义插件实现网站用户引导功能示例
2016/11/07 Javascript
利用jQuery+localStorage实现一个简易的计时器示例代码
2017/12/25 jQuery
vue中Axios的封装与API接口的管理详解
2018/08/09 Javascript
VUE+elementui面包屑实现动态路由详解
2019/11/04 Javascript
你不知道的 TypeScript 高级类型(小结)
2020/08/28 Javascript
[58:21]DOTA2亚洲邀请赛 4.3 突围赛 Liquid vs VGJ.T 第二场
2018/04/04 DOTA
Python中的startswith和endswith函数使用实例
2014/08/25 Python
跟老齐学Python之从if开始语句的征程
2014/09/14 Python
Python 爬虫多线程详解及实例代码
2016/10/08 Python
利用Python3分析sitemap.xml并抓取导出全站链接详解
2017/07/04 Python
利用Python自带PIL库扩展图片大小给图片加文字描述的方法示例
2017/08/08 Python
利用python绘制正态分布曲线
2021/01/04 Python
酒店管理专业毕业生推荐信
2013/11/10 职场文书
大学生创业计划书的范文
2014/01/07 职场文书
新郎父亲婚宴答谢词
2014/01/11 职场文书
新学期班主任寄语
2014/01/18 职场文书
毕业实习评语
2014/02/10 职场文书
大学生个人自荐信
2014/02/24 职场文书
小学班主任事迹材料
2014/12/17 职场文书
入党介绍人考察意见
2015/06/01 职场文书
基于Go Int转string几种方式性能测试
2021/04/28 Golang
MySQL sql_mode的使用详解
2021/05/08 MySQL