三条圆形加载进度条

用定位做的三个条形加载进度条，不多说，直接上代码和图片

css样式：

<style>
*{
margin: 0;
padding: 0;
}
.wrap1,.wrap1 .circle,.wrap1 .percent{
position: absolute;
width: 190px;
height: 190px;
border-radius: 50%;
}
.wrap1{
top:190px;
left:190px;
background-color: #5a7a7c;
z-index: 99
}
.wrap1 .circle{
box-sizing: border-box;
border:20px solid #5a7a7c;
clip:rect(0,190px,190px,95px);
}
.wrap1 .clip-auto{
clip:rect(auto, auto, auto, auto);
}
.wrap1 .percent{
box-sizing: border-box;
top:-20px;
left:-20px;
}
.wrap1 .left{
transition:transform ease;
border:40px solid #0ad5e2;
clip: rect(0,95px,190px,0);
transform: rotate(0deg);
}
.wrap1 .right{
border:40px solid #0ad5e2;
clip: rect(0,190px,190px,95px);
}
.wrap1 .wth0{
width:0;
}
.wrap1 .num{
position: absolute;
box-sizing: border-box;
width: 110px;
height: 110px;
left: 40px;
top: 40px;
border-radius: 50%;
background-color: #c74849;
z-index: 1;
}

.wrap2,.wrap2 .circle,.wrap2 .percent{
position: absolute;
width: 270px;
height: 270px;
border-radius: 50%;
}
.wrap2{
top:150px;
left:150px;
background-color: #d78f0b;
z-index: 90;
}
.wrap2 .circle{
box-sizing: border-box;
border:40px solid #d78f0b;
clip:rect(0,270px,270px,135px);
}
.wrap2 .clip-auto{
clip:rect(auto, auto, auto, auto);
}
.wrap2 .percent{
box-sizing: border-box;
top:-40px;
left:-40px;
}
.wrap2 .left{
transition:transform ease;
border:40px solid #ffff00;
clip: rect(0,135px,270px,0);
transform: rotate(0deg);
}
.wrap2 .right{
border:40px solid #ffff00;
clip: rect(0,270px,270px,135px);
}
.wrap2 .wth0{
width:0;
}
.wrap2 .num{
position: absolute;
box-sizing: border-box;
width: 180px;
height: 180px;
left: 45px;
top: 45px;
border-radius: 50%;
background-color: #fff;
z-index: 1;
}

.wrap3,.wrap3 .circle,.wrap3 .percent{
position: absolute;
width: 350px;
height: 350px;
border-radius: 50%;
}
.wrap3{
top:110px;
left:110px;
background-color: #530a6e;
}
.wrap3 .circle{
box-sizing: border-box;
border:40px solid #530a6e;
clip:rect(0,350px,350px,175px);
}
.wrap3 .clip-auto{
clip:rect(auto, auto, auto, auto);
}
.wrap3 .percent{
box-sizing: border-box;
top:-40px;
left:-40px;
}
.wrap3 .left{
transition:transform ease;
border:40px solid #8304ff;
clip: rect(0,175px,350px,0);
transform: rotate(0deg);
}
.wrap3 .right{
border:40px solid #8304ff;
clip: rect(0,350px,350px,175px);
}
.wrap3 .wth0{
width:0;
}
.wrap3 .num{
position: absolute;
box-sizing: border-box;
width: 270px;
height: 270px;
left: 40px;
top: 40px;
border-radius: 50%;
background-color: #fff;
z-index: 1;
}
</style>

html结构：

<div style="position: relative;">
<div class="wrap1">
<div class="circle">
<div class="percent left"></div>
<div class="percent right wth0"></div>
</div>
<div class="num"></div>
</div>
<div class="wrap2">
<div class="circle">
<div class="percent left"></div>
<div class="percent right wth0"></div>
</div>
<div class="num"></div>
</div>
<div class="wrap3">
<div class="circle">
<div class="percent left"></div>
<div class="percent right wth0"></div>
</div>
<div class="num"></div>
</div>
</div>

 控制加载度数，调整每个wrap的left的rotate度数，在180度的时候，crile类加上clip-aotu类，right类取掉wth0类，就可以了