.preloader {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: #fdfdfd;
    text-align: center;
    z-index: 999;
    display: block;
}
.preloader .loading {     
    -webkit-animation: load-trang 1s infinite linear;
    animation: load-trang 1s infinite linear;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #fff;
    border: 6px solid;
    border-color: #b31 transparent transparent transparent;    
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

@keyframes load-trang {
  0%, 50%, 100% {
    animation-timing-function: cubic-bezier(0.5, 0.5, 0.5, 0.5);
  }
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  50% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-webkit-keyframes load-trang {
  0%, 50%, 100% {
    animation-timing-function: cubic-bezier(0.5, 0.5, 0.5, 0.5);
  }
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  50% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}