https://blog.csdn.net/tdl081071tdy/article/details/106547045
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style>
.circleProgress_wrapper{
width: 200px;
height: 200px;
margin: 50px auto;
position: relative;
border:1px solid #ddd;
}
.wrapper{
width: 100px;
height: 200px;
position: absolute;
top:0;
overflow: hidden;
}
.right{
right:0;
border: solid 1px black;
}
.left{
left:0;
border: solid 1px red;
}
.circleProgress{
width: 160px;
height: 160px;
border:20px solid rgb(172, 172, 172);
position: absolute;
top:0;
border-radius: 50%;
transform: rotate(-135deg);
}
.rightcircle{
border-top:20px solid rgb(218, 252, 24);
border-right:20px solid rgb(218, 252, 24);
right:0;
animation: circleProgressLoad_right 5s linear infinite;
}
.leftcircle{
border-bottom:20px solid rgb(218, 252, 24);
border-left:20px solid rgb(218, 252, 24);
left:0;
animation: circleProgressLoad_left 5s linear infinite;
}
@keyframes circleProgressLoad_right{
0%{
-webkit-transform: rotate(-135deg);
}
50%,100%{
-webkit-transform: rotate(45deg);
}
}
@keyframes circleProgressLoad_left{
0%,50%{
-webkit-transform: rotate(-135deg);
}
100%{
-webkit-transform: rotate(45deg);
}
}
</style>
</head>
<body>
<div class="circleProgress_wrapper">
<div class="wrapper right">
<div class="circleProgress rightcircle"></div>
</div>
<div class="wrapper left">
<div class="circleProgress leftcircle"></div>
</div>
</div>
</body>
</html>
原创文章，作者：1402239773，如若转载，请注明出处：https://blog.ytso.com/tech/pnotes/270795.html