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

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

1、效果预览

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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Javascript jquery css 写的简单进度条控件

    通过我们伟大的 CSS,可以实现非常漂亮的进度条样式.加上 Javascript 的效果,就可以完全"欺骗"我们的用户,让他们有耐心等待浏览器处理完成.上述的原理已经知道了,那么就可以直接看代码了.本人使用的还是 jQuery 框架,因为这样简短的代码可能会更容易理解. 当然这个控件还有很多需要完成的地方,我仅仅是提供了一种遵循 Web 标准的实现思路.废话不多说. Javascript Progress Bar Demo - jb51.net #progress {backgroun

  • 用CSS+JS实现的进度条效果效果

    进度条,就是在用户进入你的网站的时候,能让用户看到网页下载了多少,这个的作用非常明显---就是让用户的等待时间变长,可以有效的弥补空间慢的缺点(当然,你空间太慢,还是建议你换下空间,呵呵) 好了,现在我先来举两个例子 一个是用FLASH实现的 (这个网上很多网站都是,不说了) 一个是用动态的GIF实现的 (这个你可以看微软官方的下载页面,也不说了) 这里,我们的重点是用 CSS+JS 实现这个效果 好了,废话不多说,我们开始 首先,写一段HTML代码 <div id="loading&qu

  • js 进度条实现代码

    进度条 body{ text-align:center; } .graph{ width:450px; border:1px solid #F8B3D0; height:25px; } #bar{ display:block; background:#FFE7F4; float:left; height:100%; text-align:center; } #barNum{ position:absolute; } function $(obj){ return document.getElem

  • js实现音频控制进度条功能

    js实现音频控制进度条功能

    效果图: 代码如下: <!doctype html> <html> <head> <meta name="author" content="dony"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="pragma" content="no

  • JS 进度条效果实现代码整理

    第一种方法:Loading.js 复制代码 代码如下: //频率 var frequency = 50; //步长 var step = 3; //背景颜色 var loadingBgcolor = "#ffffff"; //宽度 var loadingWidth = 354; /* *参数说明: *content:显示内容,可以为空: *imageURL:将引用JS文件的路径设置即可: *left:进度条显示位置left *top:进度条显示位置top */ function Loa

  • javascript 进度条的几种方法

    javascript 进度条的几种方法

    我们先看看最终效果: 第一步,基本 构建基本的代码,看效果演示: 制作进度条的两种方法 *{ margin:0; padding:0; } body{font-size:12px;}h1{font-size:15px;} .wrap{ font-size: 12px; margin:40px auto; width:400px; } /*进度条样式*/ .progressbar_1{ background-color:#eee; height:16px; width:150px; border:

  • JS实现环形进度条（从0到100%）效果

    JS实现环形进度条（从0到100%）效果

    最近公司项目中要用到这种类似环形进度条的效果,初始就从0开始动画到100%结束.动画结果始终会停留在100%上,并不会到因为数据的关系停留在一半. 如图 代码如下 demo.html <!doctype html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content=

  • PHP中使用Session配合Javascript实现文件上传进度条功能

    Web应用中常需要提供文件上传的功能.典型的场景包括用户头像上传.相册图片上传等.当需要上传的文件比较大的时候,提供一个显示上传进度的进度条就很有必要了. 在PHP 5.4以前,实现这样的进度条并不容易,主要有三种方法: 1.使用Flash, Java, ActiveX 2.使用PHP的APC扩展 3.使用HTML5的File API 第一种方法依赖第三方的浏览器插件,通用性不足,且易带来安全隐患.不过由于Flash的使用比较广泛,因此还是有很多网站使用Flash作为解决方案. 第二种方法的不足

  • JavaScript实现网页加载进度条代码超简单

    网页进度条能够更好的反应当前网页的加载进度情况,loading进度条可用动画的形式从开始0%到100%完成网页加载这一过程.但是目前的浏览器并没有提供页面加载进度方面的接口,也就是说页面还无法准确返回页面实际加载的进度,本文中我们使用jQuery来实现页面加载进度条效果. HTML 首先我们要知道的是,目前没有任何浏览器可以直接获取正在加载对象的大小.所以我们无法通过数据大小来实现0-100%的加载显示过程. 因此我们需要通过html代码逐行加载的特性,在整页代码的若干个跳跃行数中设置节点,进行

  • js实现进度条的方法

    js实现进度条的方法

    本文实例讲述了js实现进度条的方法.分享给大家供大家参考.具体实现方法如下: 1.setTimeout和clearTimeout <html> <head> <title>进度条</title> <style type="text/css"> .container{ width:450px; border:1px solid #6C9C2C; height:25px; } #bar{ background:#95CA0D; f

随机推荐