<div id="preloader"><div id="spinner"></div></div>

#preloader {
  position: fixed;
  display: block;
  width: 500px;
  height: 200px;
  background: #FFF;
}
#spinner {
  position: relative;
  height:35px;
  width:35px;
  top: 50%;
  margin-bottom: -12px;
  margin:0 auto;
  border:3px solid rgba(226, 226, 226, 0.75);
  border-radius:100%;
  -webkit-animation: rotation .6s infinite linear;
    -moz-animation: rotation .6s infinite linear;
      -o-animation: rotation .6s infinite linear;
         animation: rotation .6s infinite linear;
}
#spinner:before {
   content:"";
   display:block;
   position:absolute;
   left:-3px;
   top:-3px;
   height:100%;
   width:100%;
   border-top:3px solid rgba(0,0,0,1);
   border-left:3px solid transparent;
   border-bottom:3px solid transparent;
   border-right:3px solid transparent;
   border-radius:100%;
}
@-webkit-keyframes rotation {
   from {-webkit-transform: rotate(0deg);}
   to {-webkit-transform: rotate(359deg);}
}
@-moz-keyframes rotation {
   from {-moz-transform: rotate(0deg);}
   to {-moz-transform: rotate(359deg);}
}
@-o-keyframes rotation {
   from {-o-transform: rotate(0deg);}
   to {-o-transform: rotate(359deg);}
}
@keyframes rotation {
   from {transform: rotate(0deg);}
   to {transform: rotate(359deg);}
}

<div id="loadingBar"></div>

#loadingBar {
    background-color: #EE4D50;
    height: 2px;
    left: 0;
    position: fixed;
    top: 0;
    transform: translateX(100%);
    -webkit-transform: translateX(100%);
    z-index: 1800;
    width: 100%;
    animation: 1s linear 0s normal none infinite loading-bar;
    -webkit-animation: 1s linear 0s normal none infinite loading-bar;
}
@keyframes loading-bar{0%{transform:translateX(-100%)}
40%{transform:translateX(0px)}
60%{transform:translateX(0px)}
100%{transform:translateX(100%)}
}@-webkit-keyframes loading-bar{0%{-webkit-transform:translateX(-100%)}
40%{-webkit-transform:translateX(0px)}
60%{-webkit-transform:translateX(0px)}
100%{-webkit-transform:translateX(100%)}
}