#md-loader {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;;
    background: #000;
    color: #fff;
    opacity: .95;
    z-index: 9999;
    display: flex;
    align-items: center;
}
#md-loader .loader {
  width: 48px;
  height: 48px;
  display: inline-block;
  position: relative;
  margin: auto;
}
#md-loader .loader::after,
#md-loader .loader::before {
  content: '';  
  box-sizing: border-box;
  width: 48px;
  height: 48px;
  border: 3px solid #FFF;
  position: absolute;
  left: 0;
  top: 0;
  animation: rotationBreak 3s ease-in-out infinite alternate;
}
#md-loader .loader::after {
  border-color: #FF3D00;
  animation-direction: alternate-reverse;
}

@keyframes rotationBreak {
  0% {
    transform: rotate(0);
  }
  25% {
    transform: rotate(90deg);
  }
  50% {
    transform: rotate(180deg);
  }
  75% {
    transform: rotate(270deg);
  }
  100% {
    transform: rotate(360deg);
  }
}