#main{width: 100%;height: 100%;position: relative;margin: 0 auto;overflow: hidden;}
    #loading{width: 100%;height: 100%;background-color: #fff;position: absolute;left: 0;top: 0;z-index: 999999;overflow: hidden;}
    #loading .content1,#loading .content2{width: 30px;height: 30px;position: absolute;left: 50%;top: 50%;margin: -15px;}
    #loading .content1 div,#loading .content2 div{width: 8px;height: 8px;background-color: #333;position: absolute;border-radius: 50%;animation: 2s linear infinite loadingMove;--webkit-animation: 2s linear infinite loadingMove;}
    
    .acr1{left: 0;top: 0;}
    .arc2{right: 0;top: 0;}
    .arc3{left: 0;bottom: 0;}
    .arc4{right: 0;bottom: 0;}
    #loading .content2{transform: rotate(45deg);--webkit-transform: rotate(45deg);}
    @keyframes loadingMove{
      0%{-webkit-transform: scale(1);
      -moz-transform: scale(1);
      -ms-transform: scale(1);
      -o-transform: scale(1);
      transform: scale(1);
      }
      50%{
        -webkit-transform:scale(0);
        -moz-transform: scale(0);
        -ms-transform: scale(0);
        -o-transform: scale(0);
        transform: scale(0);
        
      }
      100%{
        -webkit-transform:scale(1) ;
        -moz-transform:scale(1) ;
        -ms-transform:scale(1) ;
        -o-transform:scale(1) ;
        transform:scale(1) ;
        
      }
    }
    #loading .content1 .arc1{animation-delay:-0.1s; }
    #loading .content2 .arc1{animation-delay:-0.3s; }
    #loading .content1 .arc2{animation-delay:-0.5s; }
    #loading .content2 .arc2{animation-delay:-0.7s; }
    #loading .content1 .arc3{animation-delay:-0.9s; }
    #loading .content2 .arc3{animation-delay:-1.1s; }
    #loading .content1 .arc4{animation-delay:-1.3s }
    #loading .content2 .arc4{animation-delay:-1.5s; }