main {
	padding: 0;
	margin: 0;
	font-size: 16px;
	background: #fff;
	color: #fff;
	font-family: 'Arial'; 
    position:fixed;
    width:100%;
    height:100%;
    z-index: 9999999;
}

.loding{
   width: 233px;
    height: auto;
    margin: 0 auto;
    margin-top: 20%;
}

.loding .loding_line{
    text-align: center;
    margin-top: 50px;
}

@-webkit-keyframes loding {
  0% {
    -webkit-transform: scaley(1);
            transform: scaley(1); }

  80% {
    -webkit-transform: scaley(0.3);
            transform: scaley(0.3); }

  90% {
    -webkit-transform: scaley(1);
            transform: scaley(1); } }

@keyframes loding {
  0% {
    -webkit-transform: scaley(1);
            transform: scaley(1); }

  80% {
    -webkit-transform: scaley(0.3);
            transform: scaley(0.3); }

  90% {
    -webkit-transform: scaley(1);
            transform: scaley(1); } }

.loding_line > div {
  background-color: #000;
  width: 3px;
  height: 35px;
  border-radius: 2px;
  margin: 2px;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  display: inline-block;
  -webkit-animation: loding 0.9s 0s infinite cubic-bezier(.11, .49, .38, .78);
          animation: loding 0.9s 0s infinite cubic-bezier(.11, .49, .38, .78); }
  .loding_line > div:nth-child(2), .loding_line > div:nth-child(4) {
    -webkit-animation-delay: 0.25s !important;
            animation-delay: 0.25s !important; }
  .loding_line > div:nth-child(1), .loding_line > div:nth-child(5) {
    -webkit-animation-delay: 0.5s !important;
            animation-delay: 0.5s !important; }