根据分数改变圆的占比

<div class="loading">
<div class="left"></div>
<div class="right"></div>
<div class="progress">1000</div>
</div>

 

.loading {
margin: 100px auto;
width: 8em;
height: 8em;
position: relative;
}

.loading .progress {
position: absolute;
width: 6em;
height: 6em;
background-color: white;
border-radius: 50%;
left: 1em;
top: 1em;
line-height: 6em;
text-align: center;
}

.left,
.right {
width: 4em;
height: 8em;
overflow: hidden;
position: relative;
float: left;
background-color: #a6cdf7;
}

.left {
border-radius: 8em 0 0 8em;
}

.right {
border-radius: 0 8em 8em 0;
}

.left:after,
.right:after {
content: "";
position: absolute;
display: block;
width: 4em;
height: 8em;
background-color: white;
border-radius: 8em 0 0 8em;
background-color: #348be8;
}

.right:after {
content: "";
position: absolute;
display: block;
border-radius: 0 8em 8em 0;
}
.left:after {
transform-origin: right center;
transform: rotateZ(0deg);
}

.right:after {
transform-origin: left center;
transform: rotateZ(0deg);
}

 

 

//传一个分数
function myFunction(score){
var Per =360*(score/1000);
$('.progress').text(score);
if(Per<180){
var a = Per-180 ;
$('.right').append("<style>.right:after{ transform:rotateZ("+a+"deg) }</style>");
$('.left').append("<style>.left:after{ transform:rotateZ(-180deg) }</style>");
}else{
var a = Per-360
$('.right').append("<style>.right:after{ transform:rotateZ(0deg) }</style>");
$('.left').append("<style>.left:after{ transform:rotateZ("+a+"deg)}</style>");
}
}