这篇文章将为大家详细讲解有关css实现圆形进度条的方法，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
css实现圆形进度条的方法：首先画一个方形；然后在方形中画两个等大均分方形的矩形；最后使用css3的“transform:rotate”属性将叠加环形根据实际百分比换算成实际的旋转角度即可。
进度条效果如下：
整圆的效果处理会简单些，不完整环实现起来细节多点。下边是实现逻辑和过程。
进度条组成：
环形：两种颜色进度条，当余量少于50%时进度条颜色由绿色变为黄色。进度条结构由两个叠加环形组成；上叠加环形展示剩余量，深色；下叠加环形展示100%总量，浅色。
样式实现：
1：画一个方形，如图中阴影部分所示：
2：方形中画两个等大均分方形的矩形，(注意每个矩形一定要设置：overflow:hidden)如图中阴影部分所示：
3：进度条由两个叠加环形组成，所以第一步的方形中需要画四个等大的矩形用来展示不同部分的环形。
4：每个矩形中画一个和父级方形等大的方形，用来展示环形，左半矩形中的环形只设置上边框和左边框；右半矩形中的环形只设置上边框和右边框，如图中阴影所示：
5：实现进度条的动态百分比进度，使用css3的transform:rotate将上叠加环形根据实际百分比换算成实际的旋转角度来实现。
当剩余量大于50%时左侧上叠加环形旋转角度不用变，只有计算右测上叠加环形旋转角度即可。
当剩余量小于百分之50%时，左侧上叠加环形旋转时，就会将左半环形展示为完整的半环，此时就需要一个用来遮挡左侧超出进度范围环形部分的左侧环；如下图所示:
html代码如下：
类& lt; p=坝襲nder"祝辞 类& lt; p=癱ircleProgress rightcircle"祝辞& lt;/p> & lt;/p> 类& lt; p=白髐nder"祝辞 类& lt; p=癱ircleProgress leftcircle"祝辞& lt;/p> & lt;/p> 类& lt; p=坝襲p"祝辞 类& lt; p=癱ircleProgress rightcircle js_progressRight"风格=?webkit-transform:旋转(& # 39;+ circleData.rightRotate.toString() + & # 39;度)“祝辞& lt;/p> & lt;/p> 类& lt; p=白髐p"祝辞 类& lt; p=癱ircleProgress leftcircle js_progressLeft"风格=?webkit-transform:旋转(& # 39;+ circleData.leftRotate.toString() + & # 39;度)“祝辞& lt;/p> & lt;/p>//小百分比于50时需要使用遮罩进行遮挡超出环形范围部分 类& lt; p=白髐p_left_cover js_giftLeftCover"风格=跋允?& # 39;+ circleData.leftCircleDisplay + & # 39;“比; 类& lt; p=癱ircleProgress leftcircle color_border_t_l04"祝辞& lt;/p> & lt;/p> 类& lt; p=皀um"祝辞 & lt; p>剩余& lt;/p> 类& lt; p=癹s_giftPercent"祝辞& # 39;+ circleData.percent + & # 39; % & lt;/p> & lt;/p> & lt;/p>
css代码:
