html:
<div class="circle">
<div class="percent-circle percent-circle-left">
<div class="left-content"></div>
</div>
<div class="percent-circle percent-circle-right">
<div class="right-content"></div>
</div>
<div class="c-c-inside">
8.2
</div>
</div>
css:
.circle {
position: relative;
margin: 0 auto;
width: 88px;
height: 88px;
}
.percent-circle {
position: absolute;
height: 100%;
background: #4a9bff;
overflow: hidden;
}
.percent-circle-left {
left: 0;
width: 44px;
border-radius: 44px 0 0 44px/44px 0 0 44px;
}
.left-content {
position: absolute;
content: '';
width: 100%;
height: 100%;
transform-origin: right center;
border-radius: 50px 0 0 50px/50px 0 0 50px;
background: #e5edff;
/* transform: rotate(90deg); */ /* 角度调节 */
}
.percent-circle-right {
right: 0;
width: 44px;
transform-origin: right center;
border-radius: 0 44px 44px 0/0 44px 44px 0;
}
.right-content {
position: absolute;
content: '';
width: 100%;
height: 100%;
transform-origin: left center;
border-radius: 0 44px 44px 0/0 44px 44px 0;
background: #e5edff;
/* transform: rotate(180deg); */ /* 角度调节 */
}
.c-c-inside {
position: absolute;
top: 14px;
left: 14px;
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
border-radius: 100%;
font-size: 25px;
color: #4a9bff;
}
效果图：
样式实现思路：
1：画一个方形，如图中阴影部分所示：
2：方形中画两个等大均分方形的矩形，(注意每个矩形一定要设置：overflow:hidden)如图中阴影部分所示：
3：进度条由两个叠加环形组成，所以第一步的方形中需要画四个等大的矩形用来展示不同部分的环形。
4：每个矩形中画一个和父级方形等大的方形，用来展示环形，左半矩形中的环形只设置上边框和左边框；右半矩形中的环形只设置上边框和右边框，如图中阴影所示：
5：实现进度条的动态百分比进度，使用css3的transform:rotate将上叠加环形根据实际百分比换算成实际的旋转角度来实现。
当剩余量大于50%时左侧上叠加环形旋转角度不用变，只有计算右测上叠加环形旋转角度即可。
当剩余量小于百分之50%时，左侧上叠加环形旋转时，就会将左半环形展示为完整的半环，此时就需要一个用来遮挡左侧超出进度范围环形部分的左侧环；如下图所示: