html原生来实现加载中效果

Koini

已于 2023-06-16 09:33:13 修改

阅读量473

点赞数 1

文章标签： html css3 css animation

于 2021-05-18 11:17:56 首次发布

本文链接：https://blog.csdn.net/qq_39049726/article/details/116981053

版权

请添加图片描述

<!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>
    .wrapper{
      background: #3296FA;
      position: relative;
      display: inline-block;
      border-radius: 50%;
      width: 120px;
      height: 120px;
      margin-left: 800px;
      margin-top: 300px;
      box-shadow: 0 0 15px #0e75db;
      overflow:hidden;
    }
    .round {
      border-radius: 45%;
      position: absolute;
    }
    .round1{
      width: 190px;
      height: 190px;
      top: -95px;
      left: -40px;
      animation: trun 10s linear infinite;
      background: #fff;
      z-index: 1;
    }
    .round2{
      width: 200px;
      height: 200px;
      left: -40px;
      animation: trun 5s linear infinite;
      top: -90px;
      background: rgba(255,255,255,.3);
    }
    .font{
      position: absolute;
      bottom: 20px;
      left: 45px;
      color: #0e75db;
      font-weight: bold;
      z-index: 9;
    }
    @keyframes trun {
      from {
        -webkit-transform: rotate(0deg);
      }
      to {
        -webkit-transform: rotate(360deg);
      }
    }
  </style>
</head>

<body>
  <div class="wrapper">
    <div class="round1 round"></div>
    <div class="round2 round"></div>
    <span class="font"></span>
  </div>
</body>
<script>
  var font = document.getElementsByClassName('font')[0];
  var round1 = document.getElementsByClassName('round1')[0];
  var round2 = document.getElementsByClassName('round2')[0];
  var num = 0;
  var timer = setInterval(increase,100)
  function increase(){
    if(num === 100){
      clearInterval(timer);
      return;
    }
    if(num === 15){
      font.style.color="#fff";
    }
    round1.style.top = round1.offsetTop - 1 + 'px';
    round2.style.top = round1.offsetTop - 1 + 'px';
    num++;
    font.innerHTML = `${num}%`
  }
</script>

</html>