使用 css3怎么实现一个圆形进度条

使用 css3怎么实现一个圆形进度条？针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

html代码

<divclass="progressbar">
<divclass="left-container">
<divclass="left-circle"></div>
</div>
<divclass="right-container">
<divclass="right-circle"></div>
</div>
</div>

css代码:

.progressbar{
position:relative;
margin:100pxauto;
width:100px;
height:100px;
border:20pxsolid#ccc;
border-radius:50%;
}
.left-container,.right-container{
position:absolute;
width:70px;
height:140px;
top:-20px;
overflow:hidden;
z-index:1;
}
.left-container{
left:-20px;
}
.right-container{
right:-20px;
}
.left-circle,.right-circle{
position:absolute;
top:0;
width:100px;
height:100px;
border:20pxsolidtransparent;
border-radius:50%;
transform:rotate(-135deg);
transition:all.5slinear;
z-index:2;
}
.left-circle{
left:0;
border-top-color:20pxsolidblue;
border-left-color:20pxsolidblue;
}
.right-circle{
border-right-color:20pxsolidblue;
border-bottom-color:20pxsolidblue;
right:0;
}

二：控制进度条的js

为了使进度条的逻辑更健壮，js部分的实现需要考虑四中情况：

1、基础值个更改后的值在同在右边进度，

2、基础值在右边，更改后的值在左边，

3、基础值更改后的值同在左边，

4、基础值在左边，更改后的值在右边。

不管在那种情况下，核心需要考虑只有两点：角度的变化和使用时间的多少。

第一种情况下，比较简单，可以很简单计算出角度的变化和使用时间的多少。首先，需要设定改变整个半圆的所需的时间值。设定之后，只要根据比例计算出改变的角度所需要的时间值即刻。代码如下：

time=(curPercent-oldPercent)/50*baseTime;
//确定时间值为正
curPercent-oldPercent>0?'':time=-time;
deg=curPercent/50*180-135;

第二种情况，稍微麻烦一点。因为中间有一个从右边进度，到左边进度的过渡。为了让进度顺畅的改变，这里我们需要使用定时器，在改变完右边的部分之后，再修改左边的部分。代码如下：

//设置右边的进度
time=(50-oldPercent)/50*baseTime;
deg=(50-oldPercent)/50*180-135;
$rightBar.css({
transform:'rotate('+deg+'deg)',
transition:'all'+time+'slinear'
})
//延时设置左边进度条的改变
setTimeout(function(){
time=(curPercent-50)/50;
deg=(curPercent-50)/50*180-135;

$leftBar.css({
transform:'rotate('+deg+'deg)',
transition:'all'+time+'slinear'
})
},Math.floor(time*1000));000));

第三种情况和第四种情况同前面情况类似，这里不再讨论。

完整的控制进度条的函数的代码如下（使用jQuery实现）：

/**
*设置进度条的变化
*@param{number}oldPercent进度条改变之前的半分比
*@param{number}curPercent进度条当前要设置的值
*@return{boolean}设置成功返回true，否则，返回fasle
*/
functionsetProgessbar(oldPercent,curPercent){
var$leftBar=$('#left-bar');
var$rightBar=$('#right-bar');
//将传入的参数转换，允许字符串表示的数字
oldPercent=+oldPercent;
curPercent=+curPercent;
//检测参数，如果不是number类型或不在0-100，则不执行
if(typeofoldPercent==='number'&&typeofcurPercent==='number'
&&oldPercent>=0&&oldPercent<=100&&curPercent<=100&&curPercent>=0){

varbaseTime=1;//默认改变半圆进度的时间，单位秒
vartime=0;//进度条改变的时间
vardeg=0;//进度条改变的角度
if(oldPercent>50){//原来进度大于50
if(curPercent>50){
//设置左边的进度
time=(curPercent-oldPercent)/50*baseTime;
//确定时间值为正
curPercent-oldPercent>0?'':time=-time;
deg=curPercent/50*180-135;
$leftBar.css({
transform:'rotate('+deg+'deg)',
transition:'all'+time+'slinear'
})

}else{
//设置左边的进度
time=(oldPercent-50)/50*baseTime;
deg=(oldPercent-50)/50*180-135;
$leftBar.css({
transform:'rotate('+deg+'deg)',
transition:'all'+time+'slinear'
})
//延时设置右边进度条的改变
setTimeout(function(){
time=(50-curPercent)/50;
deg=(50-curPercent)/50*180-135;
$rightBar.css({
transform:'rotate('+deg+'deg)',
transition:'all'+time+'slinear'
})
},Math.floor(time*1000));
}
}else{//原来进度小于50时

if(curPercent>50){
//设置右边的进度
time=(50-oldPercent)/50*baseTime;
deg=(50-oldPercent)/50*180-135;
$rightBar.css({
transform:'rotate('+deg+'deg)',
transition:'all'+time+'slinear'
})
//延时设置左边进度条的改变
setTimeout(function(){
time=(curPercent-50)/50;
deg=(curPercent-50)/50*180-135;

$leftBar.css({
transform:'rotate('+deg+'deg)',
transition:'all'+time+'slinear'
})
},Math.floor(time*1000));
}else{
//设置右边的进度
time=(curPercent-oldPercent)/50*baseTime;
//确定时间值为正
curPercent-oldPercent>0?'':time=-time;
deg=curPercent/50*180-135;
$rightBar.css({
transform:'rotate('+deg+'deg)',
transition:'all'+time+'slinear'
})

}
returntrue;
}
}else{
returnfalse;
}
}

关于使用 css3怎么实现一个圆形进度条问题的解答就分享到这里了，希望以上内容可以对大家有一定的帮助，如果你还有很多疑惑没有解开，可以关注恰卡编程网行业资讯频道了解更多相关知识。