vue 圆形百分比进度条_vue实现按住开始执行圆形进度条，离开屏幕时结束-CSDN博客

本文链接：https://blog.csdn.net/weixin_39788986/article/details/111493228

这篇博客介绍了如何使用Vue来创建一个圆形百分比进度条，特别适用于录音进度显示。通过HTML、CSS和JavaScript实现，当用户按住时开始执行进度，离开屏幕则停止。CSS用于设置样式，JS中的数据和方法控制进度条动态变化。

摘要由CSDN通过智能技术生成

针对类似录音显示进度需求

HTML：

按住执行圆环进度

CSS：

.circle {

width: 110px;

height: 119px;

position: relative;

border-radius: 50%;

background: #0b5bed;

left: 50%;

margin-left: -60px;

}

.pie_left, .pie_right {

position: absolute;

}

.pie_left,.left{

width: 122px;

height: 122px;

left: -1px;

right: 1px;

top: -1px;

bottom: -1px;

}

.pie_right,.right{

width: 122px;

height: 122px;

top: -1px;

bottom: -1px;

right: -1px;

left: 1px;

}

.left, .right {

display: block;

background:#000;

border-radius: 50%;

position: absolute;

}

.pie_right, .right {

clip:rect(0,auto,auto,52px);

}

.pie_left, .left {

clip:rect(0,57px,auto,0);

}

.mask {

width: 110px;

height: 110px;

border-radius: 50%;

left: 5px;

top: 5px;

position: absolute;

color:#fff;

}

JS：

data:{

num:0,

timer:null

methods:{

touchin(){

var that=this;

that.num=0;

that.timer=setInterval(function(){

if(that.num>=60){

clearInterval(that.timer);

that.touchout();

}else{

that.circle();

}

},1000)

touchout(){

var that=this;

clearInterval(that.timer);

circle: function () {

var num = this.num * 6;

if (num <= 180) {

$('.right').css('transform', "rotate(" + num + "deg)");

$('.right').css('-webkit-transform', "rotate(" + num + "deg)");

} else {

$('.right').css('transform', "rotate(180deg)");

$('.left').css('transform', "rotate(" + (num - 180) + "deg)");

$('.right').css('-webkit-transform', "rotate(180deg)");

$('.left').css('-webkit-transform', "rotate(" + (num - 180) + "deg)");

}