.middle_page_loading{
      width: 150px;
      height: 15px;
      margin: 0 auto;
      position: absolute;
      top: 45%;
      left: 50%;
      transform: translate(-50%, -50%);
  }
  .middle_page_loading span{
      display: inline-block;
      width: 15px;
      height: 100%;
      margin-right: 5px;
      background: #323332;
      -webkit-transform-origin: right bottom;
      -moz-transform-origin: right bottom;
      -ms-transform-origin: right bottom;
      -o-transform-origin: right bottom;
      transform-origin: right bottom;
      -webkit-animation: load 1s ease infinite;
      -moz-animation: load 1s ease infinite;
      -ms-animation: load 1s ease infinite;
      -o-animation: load 1s ease infinite;
      animation: load 1s ease infinite;
  }
  .middle_page_loading span:last-child{
      margin-right: 0px; 
  }
  @keyframes load {
    0%{
          opacity: 1;
      }
      100%{
          opacity: 0;
          -webkit-transform: rotate(90deg);
          -moz-transform: rotate(90deg);
          -ms-transform: rotate(90deg);
          -o-transform: rotate(90deg);
          transform: rotate(90deg);
      }
  }
  @-webkit-keyframes load {
    0%{
          opacity: 1;
      }
      100%{
          opacity: 0;
          -webkit-transform: rotate(90deg);
          -moz-transform: rotate(90deg);
          -ms-transform: rotate(90deg);
          -o-transform: rotate(90deg);
          transform: rotate(90deg);
      }
  }
  @-moz-keyframes load {
      0%{
          opacity: 1;
      }
      100%{
          opacity: 0;
          -webkit-transform: rotate(90deg);
          -moz-transform: rotate(90deg);
          -ms-transform: rotate(90deg);
          -o-transform: rotate(90deg);
          transform: rotate(90deg);
      }
  }
  @-o-keyframes load {
      0%{
          opacity: 1;
      }
      100%{
          opacity: 0;
          -webkit-transform: rotate(90deg);
          -moz-transform: rotate(90deg);
          -ms-transform: rotate(90deg);
          -o-transform: rotate(90deg);
          transform: rotate(90deg);
      }
  }
  @-ms-keyframes load {
      0%{
          opacity: 1;
      }
      100%{
          opacity: 0;
          -webkit-transform: rotate(90deg);
          -moz-transform: rotate(90deg);
          -ms-transform: rotate(90deg);
          -o-transform: rotate(90deg);
          transform: rotate(90deg);
      }
  }
  .middle_page_loading span:nth-child(1){
      -webkit-animation-delay: 0.13s;
      -moz-animation-delay: 0.13s;
      -ms-animation-delay: 0.13s;
      -o-animation-delay: 0.13s;
      animation-delay: 0.13s;
  }
  .middle_page_loading span:nth-child(2){
      -webkit-animation-delay: 0.26s;
      -moz-animation-delay: 0.26s;
      -ms-animation-delay: 0.26s;
      -o-animation-delay: 0.26s;
      animation-delay: 0.26s;
  }
  .middle_page_loading span:nth-child(3){
      -webkit-animation-delay: 0.39s;
      -moz-animation-delay: 0.39s;
      -ms-animation-delay: 0.39s;
      -o-animation-delay: 0.39s;
      animation-delay: 0.39s;
  }
  .middle_page_loading span:nth-child(4){
      -webkit-animation-delay: 0.52s;
      -moz-animation-delay: 0.52s;
      -ms-animation-delay: 0.52s;
      -o-animation-delay: 0.52s;
      animation-delay: 0.52s;
  }
  .middle_page_loading span:nth-child(5){
      -webkit-animation-delay: 0.65s;
      -moz-animation-delay: 0.65s;
      -ms-animation-delay: 0.65s;
      -o-animation-delay: 0.65s;
      animation-delay: 0.65s;
  }