$namespace: re-loading-bar;

.#{$namespace} {
  position: fixed;
  top: 0;
  left: 0;
  margin-bottom: -3px;
  height: 3px;
  width: 100%;
  z-index: 999;
  @keyframes movingBar {
    0% {
      left: 50%;
      right: 50%;
    }
    99.9% {
      left: 0;
      right: 0;
    }
    100% {
      left: 50%;
      right: 50%;
    }
  }
  @keyframes changeBar {
    0% {
      background-color: #0aa770;
    }
    33.3% {
      background-color: #0aa770;
    }
    33.33% {
      background-color: #ff0000;
    }
    66.6% {
      background-color: #f987d6;
    }
    66.66% {
      background-color: #f987d6;
    }
    99.9% {
      background-color: #00bcd4;
    }
  }
  &-bar {
    position: absolute;
    height: 0;
    width: 100%;
    text-indent: -9999px;
    background-color: #0aa770;
    animation: changeBar 2.25s infinite;
    &:before {
      content: "";
      height: 3px;
      position: absolute;
      left: 50%;
      right: 50%;
      background-color: inherit;
      animation: movingBar 0.75s infinite;
    }
  }
}