原文:https://blog.csdn.net/baidu_39048029/article/details/94413753
参考的是上面教程
自己写一遍加深印象
.y1{ /*先绘制一个圆*/
width: 160px;
height: 160px;
border-radius: 50%;
background: #ffffff;
position: relative;
}
.y2{ /*再在里面绘制半圆1*/
width: 160px;
height: 160px;
border-radius: 50%;
background: #d80b0b;
position: absolute;
clip: rect(0,80px,auto,0); /*clip 遮罩 半圆需要用到clip*/
transform: rotate(120deg); /*调整旋转角度 得到进度条效果*/
animation: upup 3s; /*可设置一个加载动画 这里可以不写*/
}
@keyframes upup{
0%{ transform: rotate(0); /*加载动画 可不要*/
}
.y3{ /*再在里面绘制半圆2*/
width: 160px;
height: 160px;
border-radius: 50%;
background: #ffffff;
position: absolute;
clip:rect(0,auto,auto,80px); /*clip 遮罩*/
}
.y4{ /*在中心绘制一个更小的圆 居中*/
width: 140px;
height: 140px;
border-radius: 50%;
background: #d80b0b;
margin: 0;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.y4>span{ /* 设置进度字体*/
display: block;
font-size: 44px;
color: white;
line-height: 10px;
}
<div class="y1">
<div class="y2"></div>
<div class="y3"></div>
<div class="y4">
<span>80%</span>
</div>
</div>