css 加载图标 小圆大圆循环动画

效果

思路：定位每个点的位置，设置延迟间隔时间，由0到1缩放，看起来像在转圈加载

 <!-- 加载中圆圈 -->
        <div class="optimize-bg" v-show="isOptimization">
          <div class="loader" >
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
          </div>
        </div>
 <!-- css -->
     .optimize-bg{
      position: absolute;
       /* 看页面需求 */
      left: 805px;
      top: 17px;
      background: #077acdca;
      width: 88px;
      height: 88px;
      border-radius: 4px;
      z-index: 2;
    }
    .loader {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 34px;
      height: 34px;
      position: relative;
      top: 8px;
      left: 20px;
    }
    .dot {
      width: 10px;
      height: 10px;
      background-color: #ffffff;
      border-radius: 50%;
      position: absolute;
      animation: grow 1.2s infinite ease-in-out;
    }
    /* 计算每个点的位置和延迟 */
    .dot:nth-child(1) { top: 0%; left: 50%; animation-delay: 0s; }
    .dot:nth-child(2) { top: 14%; left: 85%; animation-delay: -0.1s; }
    .dot:nth-child(3) { top: 50%; left: 100%; animation-delay: -0.2s; }
    .dot:nth-child(4) { top: 85%; left: 85%; animation-delay: -0.3s; }
    .dot:nth-child(5) { top: 100%; left: 50%; animation-delay: -0.4s; }
    .dot:nth-child(6) { top: 85%; left: 14%; animation-delay: -0.5s; }
    .dot:nth-child(7) { top: 50%; left: 0%; animation-delay: -0.6s; }
    .dot:nth-child(8) { top: 14%; left: 14%; animation-delay: -0.7s; }
     /* 由 0 到 1 隐藏显示 */
    @keyframes grow {
      0%, 100% {
          transform: scale(0);
      }
      50% {
          transform: scale(1);
      }
    }