element loading 动画--- # 主题使用方法：https://github.com/xitu/jueji

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  .mask{
    position: relative;
  }
  .loading{
    top: 50%;
    /* margin-top: -21px; */
    width: 100%;
    text-align: center;
    position: absolute;
  }
  .circular{
    height: 42px;
    width: 42px;
    animation: loading-rotate 2s linear infinite;
  }

/*
https://blog.csdn.net/qq_43682817/article/details/84106912

stroke-width: 定义了一条线，文本或元素轮廓厚度
stroke-linecap: 定义线的开始结束样式 (半圆形 round, 白色butt, 直角square)
stroke-dasharray: 用于创建虚线
    stroke-dasharray: x y
     x: 实线宽度 y:虚线长度
stroke-dashoffset: 实虚 开始位置   xxxxxyy 
*/


/* 圆的半径为20 周长为 125
115, 10: 实线115, 白线 10

    stroke-dasharray: 90, 150; ==> 实线90 虚线150
    ====  stroke-dasharray: 90, 35

 */
  .path{
    /* animation: loading-dash 1.5s ease-in-out infinite; */
    stroke-dasharray: 90, 150;
    stroke-dashoffset: 0;
    stroke-width: 2;
    stroke: #409EFF;
    stroke-linecap: round;
  }
  @keyframes loading-rotate {
    to {
      /* 1turn：一圈，一个圆共一圈。
90deg = 0.25turn。 */
        transform: rotate(1turn)
    }
  }
  @keyframes loading-dash {
      0% {
          stroke-dasharray: 1,200;
          stroke-dashoffset: 0
      }

      50% {
          stroke-dasharray: 90,150;
          stroke-dashoffset: -40px
      }

      to {
          stroke-dasharray: 90,150;
          stroke-dashoffset: -120px
      }
  }
</style>
<body>
  <div class="mask">
    <div class="loading">
      <svg viewBox="25 25 50 50" class="circular">
        <circle cx="50" cy="50" r="20" fill="none" class="path"></circle>
      </svg>
    </div>
  </div>
</body>
</html>