使用 css3怎么实现一个圆形进度条？针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。
html代码
<div class="progressbar"> <div class="left-container"> <div class="left-circle"></div> </div> <div class="right-container"> <div class="right-circle"></div> </div></div>css代码:
.progressbar{ position: relative; margin: 100px auto; width: 100px; height: 100px; border: 20px solid #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:20px solid transparent; border-radius: 50%; transform: rotate(-135deg); transition: all .5s linear; z-index: 2;}.left-circle{ left: 0; border-top-color: 20px solid blue; border-left-color: 20px solid blue;}.right-circle{ border-right-color: 20px solid blue; border-bottom-color: 20px solid blue; right: 0;}二：控制进度条的js
为了使进度条的逻辑更健壮，js部分的实现需要考虑四中情况：
基础值个更改后的值在同在右边进度，
基础值在右边，更改后的值在左边，
基础值更改后的值同在左边，
基础值在左边，更改后的值在右边。
不管在那种情况下，核心需要考虑只有两点：角度的变化和使用时间的多少。
第一种情况下，比较简单，可以很简单计算出角度的变化和使用时间的多少。首先，需要设定改变整个半圆的所需的时间值。设定之后，只要根据比例计算出改变的角度所需要的时间值即刻。代码如下：
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 + 's linear'})//延时设置左边进度条的改变setTimeout(function(){ time = (curPercent - 50)/50; deg = (curPercent - 50)/50*180 -135; $leftBar.css({ transform: 'rotate('+ deg+ 'deg)', transition : 'all '+ time + 's linear' })}, Math.floor(time*1000));000));第三种情况和第四种情况同前面情况类似，这里不再讨论。
完整的控制进度条的函数的代码如下（使用jQuery实现）：
function setProgessbar(oldPercent, curPercent){ var $leftBar = $('#left-bar'); var $rightBar = $('#right-bar'); //将传入的参数转换，允许字符串表示的数字 oldPercent = + oldPercent; curPercent = + curPercent; //检测参数，如果不是number类型或不在0-100，则不执行 if(typeof oldPercent ==='number' && typeof curPercent ==='number' && oldPercent >= 0 && oldPercent <= 100 && curPercent <= 100 && curPercent >= 0){ var baseTime = 1; //默认改变半圆进度的时间，单位秒 var time = 0; //进度条改变的时间 var deg = 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 + 's linear' }) }else{ //设置左边的进度 time = (oldPercent - 50)/50 * baseTime; deg = (oldPercent - 50)/50*180-135; $leftBar .css({ transform: 'rotate('+ deg+ 'deg)', transition : 'all '+ time + 's linear' }) //延时设置右边进度条的改变 setTimeout(function(){ time = (50 - curPercent)/50; deg = (50 - curPercent)/50*180 -135; $rightBar.css({ transform: 'rotate('+ deg+ 'deg)', transition : 'all '+ time + 's linear' }) }, 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 + 's linear' }) //延时设置左边进度条的改变 setTimeout(function(){ time = (curPercent - 50)/50; deg = (curPercent - 50)/50*180 -135; $leftBar.css({ transform: 'rotate('+ deg+ 'deg)', transition : 'all '+ time + 's linear' }) }, 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 + 's linear' }) } return true; } }else{ return false; } }关于使用 css3怎么实现一个圆形进度条问题的解答就分享到这里了，希望以上内容可以对大家有一定的帮助，如果你还有很多疑惑没有解开，可以关注编程网行业资讯频道了解更多相关知识。
