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

使用 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部分的实现需要考虑四中情况：

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 + '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实现）：

/**     *设置进度条的变化     *@param {number} oldPercent    进度条改变之前的半分比     *@param {number} curPercent    进度条当前要设置的值      *@return {boolean} 设置成功返回 true，否则，返回fasle     */     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怎么实现一个圆形进度条问题的解答就分享到这里了，希望以上内容可以对大家有一定的帮助，如果你还有很多疑惑没有解开，可以关注亿速云行业资讯频道了解更多相关知识。