环形加载进度条封装(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 IE和FF兼容性问题汇总
Feb 09 Javascript
JQury slideToggle闪烁问题及解决办法
Jul 05 Javascript
js nextSibling属性和previousSibling属性概述及使用注意
Feb 16 Javascript
如何在父窗口中得知window.open()出的子窗口关闭事件
Oct 15 Javascript
JavaScript eval() 函数介绍及应用示例
Jul 29 Javascript
jQuery绑定事件监听bind和移除事件监听unbind用法实例详解
Jan 19 Javascript
JS动态插入并立即执行回调函数的方法
Apr 21 Javascript
修改js confirm alert 提示框文字的简单实例
Jun 10 Javascript
jQuery获取复选框选中的当前行的某个字段的值
Sep 15 jQuery
Node.js+jade抓取博客所有文章生成静态html文件的实例
Sep 19 Javascript
为jquery的ajax请求添加超时timeout时间的操作方法
Sep 04 jQuery
vue.js 使用原生js实现轮播图
Apr 26 Vue.js
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
Zerg建筑一览
2020/03/14 星际争霸
BBS(php &amp; mysql)完整版(七)
2006/10/09 PHP
PHP面向对象编程快速入门
2006/12/14 PHP
form自动提交实例讲解
2017/07/10 PHP
php实现微信模板消息推送
2018/03/30 PHP
JQuery从头学起第三讲
2010/07/06 Javascript
使用javascript实现Iframe自适应高度
2014/12/24 Javascript
Javascript页面跳转常见实现方式汇总
2015/11/28 Javascript
JS实现队列与堆栈的方法
2016/04/21 Javascript
网页瀑布流布局jQuery实现代码
2016/10/21 Javascript
JQuery Ajax 异步操作之动态添加节点功能
2017/05/24 jQuery
jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例
2017/08/04 jQuery
jQuery封装animate.css的实例
2018/01/04 jQuery
JavaScript之数组扁平化详解
2019/06/03 Javascript
js实现随机数小游戏
2019/06/28 Javascript
Centos7 安装Node.js10以上版本的方法步骤
2019/10/15 Javascript
浅析python 中__name__ = '__main__' 的作用
2014/07/05 Python
利用Python实现颜色色值转换的小工具
2016/10/27 Python
python 内置函数filter
2017/06/01 Python
TensorFlow 实战之实现卷积神经网络的实例讲解
2018/02/26 Python
pip安装时ReadTimeoutError的解决方法
2018/06/12 Python
python pandas 对时间序列文件处理的实例
2018/06/22 Python
python实现的爬取电影下载链接功能示例
2019/08/26 Python
Python新手如何理解循环加载模块
2020/05/29 Python
兰芝美国网上商城:购买LANEIGE睡眠面膜等
2017/06/30 全球购物
手工制作的音乐盒:Music Box Attic
2019/09/05 全球购物
Tuckernuck官网:经典的美国品质服装、鞋子和配饰
2021/01/11 全球购物
澳大利亚家具商店:Freedom
2020/12/17 全球购物
高中生学习生活的自我评价
2013/10/09 职场文书
农业大学毕业生的个人自我评价
2013/10/11 职场文书
大学班级计划书
2014/04/29 职场文书
2014年乡镇安全生产工作总结
2014/12/02 职场文书
集结号观后感
2015/06/08 职场文书
小学生一年级(书信作文)
2019/08/13 职场文书
python绘图subplots函数使用模板的示例代码
2021/04/30 Python
redis不能访问本机真实ip地址的解决方案
2021/07/07 Redis