css实现圆圈加载

最新推荐文章于 2024-05-24 12:56:59 发布

不二家大哥哥

最新推荐文章于 2024-05-24 12:56:59 发布

阅读量591

点赞数

本文链接：https://blog.csdn.net/weixin_45266081/article/details/125474514

版权

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .crice{
      width: 200px;
      height: 200px;
      margin: 100px auto;
      position: relative;
      border-radius: 50%;
    }
    .left,.right{
      width: 100px;
      height: 200px;
      position: absolute;
      overflow: hidden;

    }
    .right{
      right: 0;

    }
    .left .left-crice,.right .right-crice{
    width: 100px;
    height: 200px;
    background-color: orange;

    opacity: .5
    }
    .left .left-crice{
      border-top-left-radius: 100px;
      border-bottom-left-radius: 100px;
      transition: all .5s;
      transform: rotate(-180deg);
      animation: identifier2 5s linear forwards;
      transform-origin: right;
      animation-delay: 5s;
    }
    .right .right-crice{
      background-color: orange;
      border-top-right-radius: 100px;
      border-bottom-right-radius: 100px;
      transform-origin: left;
      transition: all .5s;
      transform: rotate(-180deg);
      animation: identifier 5s linear forwards;
    }
    .left:hover .left-crice{
      transform: rotate(180deg);
    }
    .right:hover .right-crice{
      transform: rotate(180deg);
    }
    @keyframes identifier {
      0%{
        transform: rotate(-180deg);
      }
      100%{
        transform: rotate(0deg);
      }
    }
    @keyframes identifier2 {
      0%{
        transform: rotate(-180deg);
      }
      100%{
        transform: rotate(0deg);
      }
    }
    .quanquan{
      width:190px;
      height:190px;
      position: absolute;
      top:50%;
      left:50%;
      margin-top:-95px;
      margin-left:-95px;
      background-color: #fff;
      border-radius: 50%;
    }
    h1{
      text-align: center;
      font-size: 30px;
      color: orange;
      margin-top: 40%;
    }
  </style>
</head>
<body>
  <div class="crice">
    <div class="left">
      <div class="left-crice">

      </div>
    </div>
    <div class="right">
      <div class="right-crice">

      </div>
    </div>
    <div class="quanquan">
      <h1>100%</h1>
    </div>
  </div>
</body>
<script>
  let h1 = document.querySelector('h1');
    let num= 0
 let time = setInterval(function(){
    console.log(123);
    num++;
    h1.innerHTML = num+'%';
    if(num==100){
      clearInterval(time);
    }
  },100);
</script>
</html>