实现一个圆形进度条（vue）

淡淡的烟草味﹌ 2022-12-07 12:21 441阅读 0赞

实现方式：首先是用svg画两个圆，同圆心同半径的两个圆，然后把颜色都设置成透明，利用圆的边框来实现。给两个圆设置相同的边框宽度，并且设置颜色（设置一个透明，一个有颜色）；然后创建stroke-dasharray实线/虚线线条，长度（值）为 2πr，即圆的周长；将stroke-dashoffset设置为动态属性，这个属性是“定义实线/虚线的起点距离 路径 的起点的距离”，利用这个属性来当做进度条，从而控制进度。

<template>
      <div id="pro">
        <button style="display:block;margin:0 auto" :disabled="disabled" @click="begin">开始</button>
        
        
        <svg style="width:300px;height:300px">
          
          <circle r="50" cx="100" cy="100" fill="transparent" class="bg" />
          <circle r="50" cx="100" cy="100" fill="transparent" class="inner" stroke-dasharray="314" :stroke-dashoffset="progress" />
          
          
        </svg>
      </div>
    </template>

<script>
    export default { 
      name: "Progress",
    
      data() { 
        return { 
          progress: 0,
          disabled: false, // 按钮是否禁用
          timer: null,
        };
      },
      
      methods: { 
        begin() { 
          this.disabled = true;
          // 定时器的回调函数用箭头函数来写，这样里面的this才会指向vue组件
          // 如果使用普通函数写法，那么this会指向 window
          this.timer = setInterval(() => { 
            if (this.progress >= 314) { 
              this.progress = 0;
              this.disabled = false;
              clearInterval(this.timer);
            } else { 
              this.progress++;
            }
          }, 20);
        },
      },
    };
    </script>

body { 
      margin: 0;
      padding: 0;
    }
    
    #pro {  /* 容器 */
      width: 300px;
      height: 300px;
      margin: 0 auto;
    }
    
    .bg { 
      stroke-width: 8px; /* 设置边框宽度 */
      stroke: red; /* 设置边框颜色 */
    }
    
    .inner { 
      stroke-width: 8px; /* 设置边框宽度 */
      stroke: blue; /* 设置边框颜色 */
    }

实现的效果（把蓝色改成透明色即可）：  
![在这里插入图片描述][20200915213835507.png_pic_center]

[20200915213835507.png_pic_center]: /images/20221123/fc99b297af384235802c36b1bdc9bbd4.png

发表评论取消回复

表情：

评论列表（有 0 条评论，441人围观）

还没有评论，来说两句吧...

相关阅读

相关实现一个圆形进度条（vue）

实现方式：首先是用svg画两个圆，同圆心同半径的两个圆，然后把颜色都设置成透明，利用圆的边框来实现。给两个圆设置相同的边框宽度，并且设置颜色（设置一个透明，一个有颜色）；然后创

淡淡的烟草味﹌/ 2022年12月07日 12:21/ 0 赞/ 442 阅读

相关 echarts实现圆形进度条，圆环中心显示进度

目录一：效果图二：环境三：上代码四：巧妙的思路五：参考一：效果图 ![在这里插入图

柔光的暖阳◎/ 2022年11月22日 00:18/ 0 赞/ 965 阅读

相关自定义圆形进度条的实现方式

如何自定义圆形进度条哪，也就是替换一下进度条的图片而已。先分析一下，系统对进度条如何定义的：咱们一般情况下载布局文件中这么书写： \[html\] [view pl

柔情只为你懂/ 2022年09月18日 10:54/ 0 赞/ 240 阅读

相关 WPF圆形进度条制作

WPF和Winform都为我们提供了ProgressBar进度条。但是这种死板的进度条已经不能满足用户对美的要求了。因此，本篇文章要为大家展示一种圆形进度条。

快来打我*/ 2022年08月20日 10:27/ 0 赞/ 333 阅读

相关自定义View实现圆形进度条及圆形Loading

一、自定义View的四部曲: > 1、曲一：在res/values文件夹下，新建一个attrs.xml文件，然后在文件中去自定义属性，并且在<declare-stylea

亦凉/ 2022年08月19日 15:17/ 0 赞/ 286 阅读

相关纯css3实现的圆形进度条

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style typ

向右看齐/ 2022年08月03日 03:10/ 0 赞/ 285 阅读

相关 Android圆形进度条

自定义圆形进度条，见下图： ![70][] 1、自定义进度条类： package com.example.msh.view; import an

叁歲伎倆/ 2022年05月16日 04:30/ 0 赞/ 519 阅读

相关自定义Qt圆形进度条

![SouthEast][] 主要代码： include "diaplot.h" include "qpainter.h" include "qde

超、凢脫俗/ 2021年09月22日 10:12/ 0 赞/ 582 阅读

相关自定义圆形进度条

自定义圆形进度条:自己写的一个类 ,使用非常简单，非常适合新手学习。 (因为我就是新手，通过学了这个之后，以后绘制其他的图也是差不多这样，能够做到举一反三！事半功倍！非常值得

待我称王封你为后i/ 2021年09月22日 08:20/ 0 赞/ 412 阅读

相关 vue - 使用SVG实现圆形进度条音乐播放

最近在使用vue做仿网易云音乐的项目，遇到了圆形进度条实现音乐播放的功能，所以我在这里总结一下，分享给大家我的实现方法。我这里主要是通过SVG的方式实现的。效果图：

朱雀/ 2021年08月30日 13:27/ 0 赞/ 459 阅读