Single-element loader

/*Downloaded from https://www.codeseek.co/q51/single-element-loader-oXvybG */
body {
  background:#222;
  margin:0px;
  
}

/*container*/
.loader {
  position:fixed;
  top:0px;
  height:6px;
  width:100%;
  background:#333;
}

/*colour bars using box-shadows, this is what we animate, width for h-pos, and box-shadow for movement*/
.loader:before{
  position:fixed;
  top:0px;
  right:0px;
  content:"";
  height:6px;
  width:100%;
  box-shadow:
    100px 0px 0px 0px #e18728 inset,
    200px 0px 0px 0px #BE4C39 inset,
    300px 0px 0px 0px #9351A6 inset,
    400px 0px 0px 0px #4472B9 inset,
    500px 0px 0px 0px #4CA454 inset;
  -webkit-animation: loader 4s infinite;
}

/*little shadow at the bottom*/
.loader:after{
  position:fixed;
  top:0px;
  right:0px;
  content:"";
  height:6px;
  width:100%;
  box-shadow:
    0px -1px 0px 1px rgba(0,0,0,0.5) inset;
}

@-webkit-keyframes loader {
  0%  { 
      width:100%;
      box-shadow:
      0px 0px 0px 0px #e18728 inset,
      0px 0px 0px 0px #BE4C39 inset,
      0px 0px 0px 0px #9351A6 inset,
      0px 0px 0px 0px #4472B9 inset,
      0px 0px 0px 0px #4CA454 inset;
      }
  50% {
      width:50%;
      transform:translateX(-35%);
      box-shadow:
      100px 0px 0px 0px #e18728 inset,
      200px 0px 0px 0px #BE4C39 inset,
      300px 0px 0px 0px #9351A6 inset,
      400px 0px 0px 0px #4472B9 inset,
      500px 0px 0px 0px #4CA454 inset;
  }
  100%  { 
      width:0%;
      box-shadow:
      0px 0px 0px 0px #e18728 inset,
      0px 0px 0px 0px #BE4C39 inset,
      0px 0px 0px 0px #9351A6 inset,
      0px 0px 0px 0px #4472B9 inset,
      0px 0px 0px 0px #4CA454 inset;
      }
}