简单的动态小球Loading

简单的小球Loading，当然它是动态的。拿去用时class样式里记得改代码里的bgColor，mainColor，没有颜色显示不出来的。

<template>
  <div class="loadDiv bgColor">
    <div class="dotDiv">
      <span class="dot mainColor"></span>
      <span class="dot delayAnimation mainColor"></span>
    </div>
  </div>
</template>

<style lang="less" scoped>
  .loadDiv {
    width: 100%;
    height: 100%;
    z-index: 999;
    .dotDiv {
      width: 100%;
      height: 100%;
      position: fixed;
      top: 0;
      left: 0;
      .dot {
        position: absolute;
        left: calc(50% - 50px);
        top: calc(50% - 50px);
        width: 100px;
        height: 100px;
        border-radius: 100%;
        display: inline-block;
        // dotAnimation 绑定关键帧名称 linear 动画播放速度 线性播放 首尾速度相同 infinite 动画播放次数 无限循环
        -webkit-animation: dotAnimation 1.6s linear infinite;
        animation: dotAnimation 1.6s linear infinite;
      }
    }
  }
  // 设置关键帧从动画开始到结束的动作
  // transform: scale 2D缩放转换
  @keyframes dotAnimation {
    0% {
      -webkit-transform: scale(0, 0);
      transform: scale(0, 0);
      opacity: .5;
    }
    100% {
      -webkit-transform: scale(1, 1);
      transform: scale(1, 1);
      opacity: 0;
    }
  }
  // 设置动画延迟
  .delayAnimation {
    animation-delay: -0.8s !important;
    -webkit-animation-delay: -0.8s !important;
  }
</style>