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

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类，就可以了