.cubes-box {
  width: 100vw;
  height: 100rpx;
  position: relative;
  top: 40%;
  transform: translateY(-50%);

  .cubes {
    width: 80rpx;
    height: 80rpx;
    margin: auto;
  
    .sk-cube {
      width: 33%;
      height: 33%;
      // background-color: #9e1068;
      float: left;
      animation: gridScaleDelay 1.3s infinite ease-in-out;
    }
   
    .sk-cube1 {
      animation-delay: 0.2s;
    }
     
    .sk-cube2 {
      animation-delay: 0.3s;
    }
     
    .sk-cube3 {
      animation-delay: 0.4s;
    }
     
    .sk-cube4 {
      animation-delay: 0.1s;
    }
     
    .sk-cube5 {
      animation-delay: 0.2s;
    }
     
    .sk-cube6 {
      animation-delay: 0.3s;
    }
     
    .sk-cube7 {
      animation-delay: 0s;
    }
     
     .sk-cube8 {
      animation-delay: 0.1s;
     }
     
    .sk-cube9 {
      animation-delay: 0.2s;
    }
  }
    

  .cubes-tip {
    display: inline-block;
    margin-top: 40rpx;
    width: 100%;
    text-align: center;
  }
}

@keyframes gridScaleDelay {
  0%,
  70%,
  100% {
   transform: scale3D(1, 1, 1);
  }

  35% {
   transform: scale3D(0, 0, 1);
  }
}