#wrapper
  #loader
  #loadText Loading...
View Compiled
$loader_color: #DAA520;
body {
  background: #202020  radial-gradient(transparent,#303030);
  overflow:hidden;
}
#wrapper{
  width: 150px;
  margin: 150px auto;
  position:relative;
  #loader {
    position:relative;
    width: 100%;
    height: 10px;
    border: 1px solid $loader_color;
    border-radius: 10px;
    animation: turn 4s linear 1.75s infinite;
    &:before {
      content:'';
      display:block;
      position:absolute;
      width: 0%;
      height: 100%;
      background: $loader_color;
      box-shadow: 10px 0px 15px 0px $loader_color;
      animation: load 2s linear infinite;
    }
  }
  #loadText{
    width:100%;
    position:absolute;
    top: 10px;
    color: $loader_color;
    font-size: 1.4em;
    text-align:center;
    animation: bounce 2s  linear infinite;
  }
}
@keyframes load {
  0%{width: 0%;}
  87.5%, 100%{width:100%;}
}
@keyframes turn{
  0%{transform: rotateY(0deg);}
  6.25%, 50%{transform: rotateY(180deg);}
  56.25%, 100%{transform: rotateY(360deg);}
}
@keyframes bounce{
  0%,100%{top: 10px;}
  12.5%{top: 30px;}
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.