使用css实现圆形进度条循环转圈-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_41054215/article/details/108221811

本文详细解析了一个使用HTML、CSS和JavaScript实现的动态加载效果案例，重点介绍了一种通过动画和变换实现的圆形进度条加载动画。该加载动画包括两个半圆，分别从左右两侧旋转并改变颜色，最终形成一个完整的橙色圆圈。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
   body{
       background-color:#00f;
   }
   a{
       text-decoration:none;
       color:#000;
   }
   .circleProgress_wrapper{
width: 200px;
height: 200px;
margin: 150px auto;
position: relative;
text-align:center;
/*border:1px solid #ddd;*/
}
.lyws{
   width:100%;
   height:100%;
   border-radius:50%;
   background-color:#fff;
   font-size:14px;
}
.circleProgress_wrapper img{
   width:60%;
   padding-top:12%;
   padding-left:20%;
   padding-right:20%;
}

.wrapper{
width: 100px;
height: 200px;
position: absolute;
top:0;
overflow: hidden;
}
.right{
right:0;
}
.left{
left:0;
}
.circleProgress{
width: 160px;
height: 160px;
border:20px solid rgb(232, 232, 12);
border-radius: 50%;
position: absolute;
top:0;
-webkit-transform: rotate(45deg);
}
.rightcircle{
border-top:20px solid orange;
border-right:20px solid orange;
right:0;
-webkit-animation: circleProgressLoad_right 5s linear infinite;
}
.leftcircle{
border-bottom:20px solid orange;
border-left:20px solid orange;
left:0;
-webkit-animation: circleProgressLoad_left 5s linear infinite;
}
@-webkit-keyframes circleProgressLoad_right{
0%{
border-top:20px solid #ED1A1A;
border-right:20px solid #ED1A1A;
-webkit-transform: rotate(45deg);
}
50%{
border-top:20px solid rgb(232, 232, 12);
border-right:20px solid rgb(232, 232, 12);
border-left:20px solid rgb(81, 197, 81);
border-bottom:20px solid rgb(81, 197, 81);
-webkit-transform: rotate(225deg);
}
100%{
border-left:20px solid orange;
border-bottom:20px solid orange;
-webkit-transform: rotate(225deg);
}
}
@-webkit-keyframes circleProgressLoad_left{
0%{
border-bottom:20px solid #ED1A1A;
border-left:20px solid #ED1A1A;
-webkit-transform: rotate(45deg);
}
50%{
border-bottom:20px solid rgb(232, 232, 12);
border-left:20px solid rgb(232, 232, 12);
border-top:20px solid rgb(81, 197, 81);
border-right:20px solid rgb(81, 197, 81);
-webkit-transform: rotate(45deg);
}
100%{
border-top:20px solid orange;
border-right:20px solid orange;
border-bottom:20px solid orange;
border-left:20px solid orange;
-webkit-transform: rotate(225deg);
}
}
</style>
</head>
<body>
   <a href="./xf1.html">
       <div class="circleProgress_wrapper">
           <div class="lyws">
               <img src="./1.png">
               360蓝焰卫士
           </div>
           <div class="wrapper right">
           <div class="circleProgress rightcircle"></div>
           </div>
           <div class="wrapper left">
           <div class="circleProgress leftcircle"></div>
           </div>
       </div>
   </a>
</body>
</html>