首先看下效果图：
主要涉及的css的clip，以及transform旋转使用。不废话，直接来代码。（基于jq）
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="base/base::head('进度条测试页面',~{::link},~{::script},~{::style})">
<style type="text/css">
/* 背景色：#00ab51 */
.pro-panel{
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 150px;
height: 150px;
display: flex;
justify-content: center;
align-items: center;
}
.pro-panel .pro-tran{
width: 100px;
height: 100px;
position: absolute;
background-color: #00ab51;
border-radius: 50%;
}
.pro-panel .pro-tran .pro-circle-left,.pro-panel .pro-tran .pro-circle-right{
width: 100px;
height: 100px;
background-color: white;
border-radius: 50%;
position: absolute;
}
.pro-panel .pro-tran .pro-circle-left{
clip: rect(0,50px,100px,0);
}
.pro-panel .pro-tran .pro-circle-right{
clip: rect(0, 100px,100px,50px);
}
.pro-panel .pro-text,.pro-panel .pro-inter{
width: 75px;
height: 75px;
position: absolute;
border-radius: 50%;
background-color:#00ab51;
text-align: center;
line-height: 75px;
}
.pro-panel .pro-inter{
width: 85px;
height: 85px;
background-color: white;
}
</style>
<script type="text/javascript">
function rotateTran(percent){
var percent = percent;
if (percent <= 50){
$('.pro-circle-right').css('transform','rotate('+(percent*3.6)+'deg)');
}else {
$('.pro-circle-right').css({
'transform':'rotate(0)',
'background-color':'#00ab51'
});
$('.pro-circle-left').css('transform','rotate('+((percent-50)*3.6)+'deg)');
if(percent == 100){
$('.pro-circle-right,.pro-circle-left').css('background-color','#00ab51');
}
}
$(".pro-text").text(percent+"%");
}
$(function () {
var percent = 0;
var mytarget = setInterval(function () {
if (percent == 100){
clearInterval(mytarget);
}
rotateTran(percent);
percent += 5;
},500);
})
</script>
</head>
<body>
<div class="pro-panel">
<div class="pro-tran">
<div class="pro-circle-left"></div>
<div class="pro-circle-right"></div>
</div>
<div class="pro-inter"></div>
<div class="pro-text">1%</div>
</div>
</body>
</html>