css+vue实现不完整环的圆环进度条

描述

实现一个border为8px的不完整圆环进度条，小于50%进度条颜色为#97d3ff，大于50%进度条颜色为#0094ff。

原理

1. 画一个宽144px高144px的方形；
2. 方形中画两个等大均分方形的矩形宽72px高144px，(注意每个矩形一定要设置：overflow:hidden)，css中的right left样式；
3. 进度条由两个叠加环形组成，所以第一步的方形中需要画四个等大的矩形用来展示不同部分的环形 under下的rightcircle,leftcircle up下的 rightcircle,leftcircle四个。
4. 每个矩形中画一个和父级方形等大的方形，用来展示环形，左半矩形中的环形只设置上边框和左边框；右半矩形中的环形只设置上边框和右边框；
5. 实现进度条的动态百分比进度，使用css3的transform:rotate将上叠加环形根据实际百分比换算成实际的旋转角度来实现。
   当剩余量大于50%时左侧上叠加环形旋转角度不用变，只有计算右测上叠加环形旋转角度即可。
   当剩余量小于百分之50%时，左侧上叠加环形旋转时，就会将左半环形展示为完整的半环，此时就需要一个用来遮挡左侧超出进度范围环形部分的左侧环 up_left_cover；

html代码

<div class="progress_wrap" :class="giftCircleProgressFn(5).halfClassName">
     <div class="right under">
         <div class="circleProgress rightcircle"></div>
     </div>
     <div class="left under">
         <div class="circleProgress leftcircle"></div>
     </div>
     <div class="right up">
         <div class="circleProgress rightcircle" :style="{transform:'rotate('+giftCircleProgressFn(5).rightRotate.toString()+'deg)'}"></div>
     </div>
     <div class="left up">
         <div class="circleProgress leftcircle" :style="{transform:'rotate('+giftCircleProgressFn(5).leftRotate.toString()+'deg)'}"></div>
     </div>
     //percent小于50时需要使用遮罩进行遮挡超出环形范围部分
     <div class="left up_left_cover" :style="{display:giftCircleProgressFn(5).leftCircleDisplay}">
         <div class="circleProgress leftcircle"></div