css3环形进度条 别动 |treerightcss

.progress-wrapper{
position:relative;
width: 80px;
height: 80px;
}
.progress-bar{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
border-radius:50%;
clip:rect(0px,80px,80px,40px);
background-color:#eee;
transform:rotate(-90deg);
}
.progress-circle{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
border-radius:50%;
clip:rect(0px,40px,80px,0px);
background-color:#fff;
transform:rotate(-90deg);
}
.progress-fill{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
border-radius: 50%;
clip: rect(0px, 40px, 80px, 0px);
background-color: #007aff;
z-index:1;
transform-origin: 50% 50%;
}
.progress-fill::before {
content: "";
position: absolute;
top: 0;
left: 50%;
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #ffffff;
transform: translate(-50%, -50%);
}

以上是CSS代码实现环形进度条的样式，通过clip属性限定展示区域，通过transform实现旋转等效果，再通过z-index属性将填充区域置于底层，即可实现一种基础的环形进度条效果。

在实际开发当中，大家还可以根据需求修改进度条的颜色、大小以及各个元素的位置等属性，以达到最终的期望效果。