.loading{
    
    position: relative;
    z-index: 999;
    left:0px;
    top:-55px;
}

 .flex-loading {
     width: 200px;
     height: 28px;
     position: absolute;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%)
 }

     .flex-loading li {
         width: 4px;
         height: 8px;
         display: inline-block;
         background: #fff;
         margin: 0 2px;
         /* 动画名：flex-loading，
      * 执行时长：0.8s，
      * 动画执行速度：ease-in-out(指定开始和结束较慢的动画)，
      * 动画执行次数：infinite(无限次) */
         animation: flex-loading 0.8s ease-in-out infinite;
         /* 每个小格子的伸缩动画分别延迟0.1s，0.2s，0.3s...执行，
      * var(--time)使用CSS3变量 */
         animation-delay: calc(0.1s * var(--time));
     }

 @keyframes flex-loading {

     0%, 25%, 50% {
         transform: scaleY(1);
     }
     /* 小格子纵向伸展到原来的4倍 */
     75% {
         transform: scaleY(4);
     }
 }