vue圆环进度条_Vue实现环形进度条方法组件

最新推荐文章于 2025-09-12 14:01:00 发布

原创最新推荐文章于 2025-09-12 14:01:00 发布 · 469 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue圆环进度条

该博客介绍如何在Vue中创建一个动态的环形进度条组件。通过设置初始值、总值以及使用定时器更新进度，实现进度条从0%到指定百分比的平滑过渡。组件还包括样式调整，如不同阶段的进度颜色变化。

export default {

data () {

return {

msg : 'ring',

InitialVal : 0,

isActive : {

circle : false,

right : true

}

props:{

'datas':Object,

// 'sum':Number,

// 'titles':String,

// 'description':String,

methods:{

mounted(){//挂载结束调用的函数

var percent = 0

var sum = this.datas.sum;

var _this = this;

var loading=setInterval(function(){

if(percent == sum){

clearTimeout(loading);

}

if(percent>50){

_this.isActive.right = false;

_this.isActive.circle = true;

}

_this.InitialVal = percent;

percent++;

},10);

}

margin: 0;

padding: 0;

}

.wrap,.circle,.percent{

position: absolute;

width: 100px;

height: 100px;

border-radius: 50%;

}

.wrap{

position: relative;

top:50px;

left:50px;

display: inline-block;

background-color: #ccc;

}

.circle{

box-sizing: border-box;

border:20px solid #ccc;

clip:rect(0,100px,100px,50px);

}

.clip-auto{

clip:rect(auto, auto, auto, auto);

}

.percent{

box-sizing: border-box;

top:-20px;

left:-20px;

}

.left{

transition:transform ease;

border:20px solid #00ff00;

clip: rect(0,50px,100px,0);

}

.right{

border:20px solid #00ff00;

clip: rect(0,100px,100px,50px);

}

.wth0{

width:0;

}

.num{

position: absolute;

box-sizing: border-box;

width: 60px;

height: 60px;

line-height: 60px;

text-align: center;

font-size: 40px;

left: 20px;

top: 20px;

border-radius: 50%;

background-color: #fff;

z-index: 1;

}

.ring-title{

width: 100%;

position: absolute;

bottom: -50px;

text-align: center;

}

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_39713814

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

Vue 实现动态环形进度条：带渐变效果的交互式示例” “从零开始：Vue 动态环形进度条实现教程（包含动画和渐变效果）” “Vue 项目实战：打造炫酷动态环形进度条，快速上手指南” “新手必看：使用

南北极之间

11-08

1019

在这篇教程中，我们将一步步学习如何用 Vue.js 实现一个动态环形进度条。通过使用 SVG 技术，我们将制作一个具有渐变效果的圆环进度条，并通过按钮控制其进度的增加、减少和重置。这个项目非常适合 Vue 新手，能够帮助你掌握数据绑定、事件处理和简单的动画效果。我们将创建一个页面，显示一个环形进度条，并可以通过点击按钮动态改变进度。进度条的动画效果会基于当前进度百分比进行变化。除了进度条本身，我们还将为用户提供三个按钮，用于控制进度的增加、减少以及重置。首先，创建一个基础的 HTML 文件，包含 Vue.j

vue3实现圆环进度条组件

weixin_45118138的博客

05-19

2384

前言使用vue3实现一个圆环进度条 带有加载动画、中间为插槽、背景可以设置渐变效果效果展示完整代码如下 <template> <div class="percentloop" ref="percentloop"> <div class="circle-left"> <div ref="leftcontent"></div> </div> <div class="circ

参与评论您还未登录，请先登录后发表或查看评论

vue3实现环形进度条组件

gaotlantis的博客

10-11

1417

实现起来并不难，这样就很简单的实现了带动画效果的环形进度条了，有需要的朋友可以基于此自己二次开发或者设计，兴许哪天你也用上了。并且可以扩展成自己想要的风格了原文：https://juejin.cn/post/7424095770275954739。

vcircle用Vuejs实现一个的圆形进度条

08-10

v-circle：用Vue.js实现一个的圆形进度条

Vue-Ellipse-Progress 使用指南

最新发布

m0_64344997的博客

09-12

1073

🎨 高度可定制的圆形进度条📊 支持多种数据展示格式🎬 平滑的动画效果🎯 支持多个进度线🌈 丰富的颜色配置📱 响应式设计⚡ 轻量级，性能优秀使用angle-- 从顶部开始 -->/>size?: number;thickness?: number;: number;color?emptyColor?: string;lineCap?angle?: number;clockwise?: 1 | -1;animation?dot?}>;easing?

vue 做圆环进度条

luoxuehui_blog的博客

12-04

6644

昨天公司要做一个类似于这样的效果：上面是昨天已经做出来的效果图，感觉还不错。本来准备用canvas来做，但是有页面上有很多圆环，造成了很多canvas同时存在的时候页面卡顿，所以用的css来做的。 1. clip:rect(0, 150px, 150px, 75px); 先给大家说下这个属性，裁剪。此属性为CSS2.1规范，使用上基本上没有类似于max-height/display:tab...

vue环形进度条

m0_65432258的博客

09-25

519

vue环形进度条。

vue自定义环形进度条

Seveny07的博客

10-28

2590

vue自定义环形进度条

vue svg实现一个环形进度条组件

weixin_47180815的博客

07-17

729

设计初衷：本来想直接使用element的进度条组件的，但是好多属性都没有办法控制。UI设计的图如下，需要控制未完成和已完成的颜色，端点的形状改为普通的butt所以使用svg实现了一个环形进度条组件element组件设计图实现效果可以交互的svg 环形进度条组件</</</importfrom'vue';constdefault48default12default'#D5DDEB'// 灰色背景default'#367AFB'// 蓝色进度default0validator。

vue+svg圆形百分比进度条组件

MoYu的博客

11-15

1124

vue+svg圆形进度条组件

Vue环形进度条

一个前端工作者的博客

08-12

3410

环形进度条可设置背景颜色，遮罩层，文字，百分值默认保存两位小数 sizeOut:底圈半径 Number 默认值：100 sizeIn里圈半径 Number 默认值：80 size进度条大小 Number 默认值：10 注意：需要满足sizeOut>sizeIn+size colorBg背景色 String 默认值：#fff 支持rgb\rgba\十六进制（3位或者6位）\hsl\hsla colorTop进度条颜色 String 默认值：#0f0 支持rgb\rgba\十六进.

vue3圆环进度条组件

weixin_62639453的博客

07-06

1271

主要用于展示数值，和根据百分比展示圆环。

vue 环形进度条

明耀的博客

10-09

1342

cnpm install vue-circleprogressbar <div style="height: 160px;" > <circle-progressbar style="overflow-y:hidden;" barColor="#00ffff" backgroundColor="rgba(0,0,0,0.8)" :width="60" :radius="25" :progress="70" :isAnimation="true"></circle-

Vue3 Element Plus集成

lkr_lkr的博客

10-09

612

Vue3 Element Plus 集成推荐使用自动按需导入首先你需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件。

vue 环形进度条（动态的效果）

qq_32184753的博客

07-28

2261

<div class="percentloop"> <div class="circle-left"> <div ref="leftcontent"></div> </div> <div class="circle-right"> <div ref="rightcontent"></div> </div> <div class="n

vue组件---环形进度条组件

AboyL的博客

07-09

9026

在做项目的时候，最好只使用一套组件库，但是很多时候我们的组件库里面没有我们需要的组件，这个时候我们还是需要自己写组件了，vux里面就没有环形进度条组件，所以需要自己写一个。查找资料后发现了一个很好的实现方式，通过svg来实现，以前的时候学过一点svg但是没有怎么深入了解过。。。现在看来真是罪过，给出参考链接 https://segmentfault.com/a/119000000814940...

vue实现一个圆形进度条

weixin_44282046的博客

12-19

402

【代码】vue实现一个圆形进度条。

vue圆环进度条_vue自己封装圆环进度条

weixin_39633276的博客

12-19

235

{{progress}}%{{title}}import $ from'jquery';exportdefault({props: ['progress','color','width','height','title','colorkey'],data() {return{}},methods:{calcProgress(){let self= this;self.progress=parseI...

vue 圆环进度条

05-26

### 关于 Vue 中实现圆环进度条 在 Vue 生态中，可以通过多种方式来实现圆环进度条的功能。以下是几种常见的方法及其对应的示例代码。 #### 方法一：使用第三方插件 `vue-circle-progress` `vue-circle-progress` 是一个专门用于绘制动画圆形进度条的 Vue 组件[^1]。它提供了简单易用的 API 来创建动态的圆环进度条。 ```html <template> <div> <circle-progress :percent="75" :size="100" :thickness="8" empty-fill="rgba(0, 0, 0, .1)" fill="#FFB400"> </circle-progress> </div> </template> <script> import CircleProgress from 'vue-circle-progress'; export default { components: { CircleProgress } }; </script> ``` 此插件支持设置进度百分比、尺寸、线条粗细以及填充颜色等属性[^1]。 --- #### 方法二：基于 Canvas 手动实现如果希望更灵活地定制圆环进度条，则可以利用 HTML5 的 `<canvas>` 元素手动绘制。这种方式允许完全掌控样式和行为。 ```javascript <template> <div> <canvas id="progress-ring" width="200" height="200"></canvas> </div> </template> <script> export default { mounted() { const canvas = document.getElementById('progress-ring'); const ctx = canvas.getContext('2d'); const centerX = canvas.width / 2; const centerY = canvas.height / 2; const radius = 70; function drawCircle(percent) { ctx.clearRect(0, 0, canvas.width, canvas.height); // 背景圈 ctx.beginPath(); ctx.arc(centerX, centerY, radius, 0, Math.PI * 2); ctx.strokeStyle = '#eaeaea'; ctx.lineWidth = 15; ctx.stroke(); // 进度圈 ctx.beginPath(); const endAngle = (Math.PI * 2 * percent) / 100; ctx.arc(centerX, centerY, radius, -Math.PI / 2, endAngle - Math.PI / 2); ctx.strokeStyle = '#FFB400'; ctx.stroke(); } let currentPercent = 0; setInterval(() => { if (currentPercent >= 75) return; currentPercent += 1; drawCircle(currentPercent); }, 30); }, }; </script> ``` 通过调整参数（如半径、宽度、角度），可以轻松改变圆环的外观[^2]。 --- #### 方法三：借助 Element Plus 和 CSS 自定义对于使用 Vue 3 并集成 Element Plus 的开发者来说，可以直接利用其内置的 `el-progress` 组件，并通过深度样式修改实现渐变色或其他复杂效果[^3]。 ```html <template> <el-progress type="dashboard" :percentage="75" color="#ff9900"></el-progress> </template> <style scoped> /* 强制覆盖默认样式 */ :deep(.el-progress-circle__path) { stroke: v-bind(customColor) !important; stroke-linecap: round; /* 圆角端点 */ } </style> <script> export default { data() { return { customColor: "#FFB400", }; }, }; </script> ``` Element Plus 提供了丰富的选项来自定义进度条的颜色、形状以及其他视觉特性[^3]。 --- #### 方法四：适用于 Uni-app 的解决方案如果你正在开发跨平台应用（如 H5、微信小程序、iOS/Android 应用等），则可以选择 uni-app 提供的相关组件或自行封装[^4]。 ```html <view class="progress-container"> <canvas canvas-id="half-circle-progress" style="width: 200px; height: 100px;"></canvas> </view> <script> export default { onReady() { const context = wx.createCanvasContext('half-circle-progress', this); const centerX = 100; const centerY = 50; const radius = 40; // 绘制背景半圆 context.setLineWidth(10); context.setStrokeStyle('#ccc'); context.beginPath(); context.arc(centerX, centerY, radius, Math.PI, 0); context.stroke(); // 动态绘制进度 context.setStrokeStyle('#FFB400'); context.beginPath(); const angle = ((this.progressValue / 100) * Math.PI).toFixed(2); // 计算当前角度 context.arc(centerX, centerY, radius, Math.PI, Math.PI - angle); context.stroke(); }, data() { return { progressValue: 75, }; }, }; </script> ``` 以上代码展示了如何在 uni-app 环境下构建一个简单的半圆进度条[^4]。 --- ### 总结无论是采用成熟的第三方库还是手写逻辑，Vue 都能很好地满足不同场景下的需求。具体选择取决于项目的实际要求和技术栈偏好。

vue圆环进度条_Vue实现环形进度条方法组件

{{datas.title}}