环形加载进度条封装(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 动态添加标签(新增一行,其实很简单,就是几个函数的应用)
Mar 26 Javascript
网页开发中的容易忽略的问题 javascript HTML中的table
Apr 15 Javascript
最佳JS代码编写的14条技巧
Jan 09 Javascript
js获取字符串最后一位方法汇总
Nov 13 Javascript
Spring Boot+AngularJS+BootStrap实现进度条示例代码
Mar 02 Javascript
微信小程序 template模板详解及实例代码
Mar 09 Javascript
js实现自定义进度条效果
Mar 15 Javascript
Three.js的使用及绘制基础3D图形详解
Apr 27 Javascript
JavaScript实现鼠标滚轮控制页面图片切换功能示例
Oct 14 Javascript
JS实现从对象获取对象中单个键值的方法示例
Jun 05 Javascript
js实现批量删除功能
Aug 27 Javascript
原生JS实现音乐播放器的示例代码
Feb 25 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
咖啡语言
2021/03/03 咖啡文化
用PHP实现Ftp用户的在线管理
2012/02/16 PHP
探讨PHP调用时间格式的参数详解
2013/06/06 PHP
php设计模式之委托模式
2016/02/13 PHP
Thinkphp结合ajaxFileUpload实现异步图片传输示例
2017/03/13 PHP
innerHTML,outerHTML,innerTEXT三者之间的区别
2007/01/28 Javascript
JavaScript Tips 使用DocumentFragment加快DOM渲染速度
2010/06/28 Javascript
线路分流自动智能跳转代码,自动选择最快镜像网站(js)
2011/10/31 Javascript
Textarea根据内容自适应高度
2013/10/28 Javascript
JQuery页面的表格数据的增加与分页的实现
2013/12/10 Javascript
原生javascript实现图片滚动、延时加载功能
2015/01/12 Javascript
Ajax中解析Json的两种方法对比分析
2015/06/25 Javascript
Laydate时间组件在火狐浏览器下有多时间输入框时只能给第一个输入框赋值的解决方法
2016/08/18 Javascript
js仿微信抢红包功能
2020/09/25 Javascript
bootstrap table表格插件之服务器端分页实例代码
2018/09/12 Javascript
使用koa2创建web项目的方法步骤
2019/03/12 Javascript
koa+jwt实现token验证与刷新功能
2019/05/30 Javascript
js实现固定区域内的不重叠随机圆
2019/10/24 Javascript
python实现下载整个ftp目录的方法
2017/01/17 Python
Java及python正则表达式详解
2017/12/27 Python
python在文本开头插入一行的实例
2018/05/02 Python
python使用正则筛选信用卡
2019/01/27 Python
Python Pandas实现数据分组求平均值并填充nan的示例
2019/07/04 Python
利用html5 canvas动态画饼状图的示例代码
2018/04/02 HTML / CSS
HTML5中判断用户是否正在浏览页面的方法
2014/05/03 HTML / CSS
Tretorn美国官网:瑞典外套和鞋类品牌,抵御风雨
2018/07/19 全球购物
汽车专业毕业生推荐信
2013/11/12 职场文书
单位未婚证明范本
2014/01/18 职场文书
个人自我剖析材料
2014/02/07 职场文书
4s店市场专员岗位职责
2014/04/09 职场文书
战友聚会策划方案
2014/06/13 职场文书
乡镇党建工作汇报材料
2014/10/27 职场文书
小学五年级班主任工作经验交流材料
2015/11/02 职场文书
教师读书活动心得体会
2016/01/14 职场文书
Mysql案例刨析事务隔离级别
2021/09/25 MySQL
python基础之类属性和实例属性
2021/10/24 Python