环形加载进度条封装(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操作Cookie写入和读取实例代码
Oct 20 Javascript
简单的Jquery全选功能
Nov 07 Javascript
JavaScript调用ajax获取文本文件内容实现代码
Mar 28 Javascript
jQuery+PHP实现可编辑表格字段内容并实时保存
Oct 09 Javascript
jQuery 选择同时包含两个class的元素的实现方法
Jun 01 Javascript
JS中的hasOwnProperty()和isPrototypeOf()属性实例详解
Aug 11 Javascript
jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果
Jul 08 jQuery
微信小程序scroll-view实现滚动穿透和阻止滚动的方法
Aug 20 Javascript
Node.js assert断言原理与用法分析
Jan 04 Javascript
在JavaScript中如何访问暂未存在的嵌套对象
Jun 18 Javascript
在vue中使用Echarts利用watch做动态数据渲染操作
Jul 20 Javascript
详解Vue数据驱动原理
Nov 17 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生成随机数的三种方法
2014/09/10 PHP
php中strtotime函数用法详解
2014/11/15 PHP
thinkphp3.2.3版本的数据库增删改查实现代码
2016/09/22 PHP
laravel 解决crontab不执行的问题
2019/10/22 PHP
PHP中-&gt;和=&gt;的含义及使用示例解析
2020/08/06 PHP
一种JavaScript的设计模式
2006/11/22 Javascript
解决 firefox 不支持 document.all的方法
2007/03/12 Javascript
才发现的超链接js导致网页中GIF动画停止的解决方法
2007/11/02 Javascript
浅析showModalDialog数据缓存问题(用禁止浏览器缓存解决)
2013/07/09 Javascript
jQuery实现购物车计算价格功能的方法
2015/03/25 Javascript
跟我学习javascript的定时器
2015/11/19 Javascript
解析Javascript单例模式概念与实例
2016/12/05 Javascript
使用bootstrap插件实现模态框效果
2017/05/10 Javascript
详解webpack分离css单独打包
2017/06/21 Javascript
nodejs微信开发之授权登录+获取用户信息
2019/03/17 NodeJs
微信小程序如何使用canvas二维码保存至手机相册
2019/07/15 Javascript
layer关闭当前窗口页面以及确认取消按钮的方法
2019/09/09 Javascript
解决vue-cli@3.xx安装不成功的问题及搭建ts-vue项目
2020/02/09 Javascript
vue调用微信JSDK 扫一扫,相册等需要注意的事项
2021/01/03 Vue.js
EM算法的python实现的方法步骤
2018/01/02 Python
Python if语句知识点用法总结
2018/06/10 Python
python爬取微信公众号文章
2018/08/31 Python
详解python之heapq模块及排序操作
2019/04/04 Python
基于TensorFlow中自定义梯度的2种方式
2020/02/04 Python
解决django 向mysql中写入中文字符出错的问题
2020/05/18 Python
python os模块常用的29种方法使用详解
2020/06/02 Python
纯CSS3实现圆角效果(含IE兼容解决方法)
2014/05/07 HTML / CSS
美国生日蛋糕店:Bake Me A Wish!
2017/02/08 全球购物
美国环保婴儿用品公司:The Honest Company
2017/11/23 全球购物
艺术设计专业个人求职信
2014/04/10 职场文书
庆国庆国旗下讲话稿2014
2014/09/21 职场文书
2014年教育实习工作总结
2014/11/22 职场文书
《认识钟表》教学反思
2016/02/16 职场文书
2016年第104个国际护士节活动总结
2016/04/06 职场文书
基于Java的MathML转图片的方法(示例代码)
2021/06/23 Java/Android
Oracle删除归档日志及添加定时任务
2022/06/28 Oracle