css制作圆形进度条

2022-06-30 10:03:19 阅读：173 来源： 互联网

标签：right 进度条 solid transform 圆形 rgb border css left

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>

标签：right,进度条,solid,transform,圆形,rgb,border,css,left
来源： https://www.cnblogs.com/guo-siqi/p/16425756.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

css制作圆形进度条