@import "../settings/variables";
@import "../animations/loading";

$min-progress-width: 12px;

.loader {
  display: block;
  position: absolute;
  height: 100%;
  min-width: $min-progress-width;
  top: 0;
  left: 0;
  @include loading-transition;

  &__gradient {
    height: 100%;
    animation: movingStripes 0.5s linear infinite;
    background-image: linear-gradient(
      45deg,
      $loader-gradient-color-one 26%,
      $loader-gradient-color-two 25%,
      $loader-gradient-color-two 51%,
      $loader-gradient-color-one 50%,
      $loader-gradient-color-one 76%,
      $loader-gradient-color-two 75%,
      $loader-gradient-color-two
    );
    background-size: $loader-grid-unit $loader-grid-unit;
  }
}

@keyframes movingStripes {
  from {
    background-position: $loader-grid-unit 0;
  }
  100% {
    background-position: 0 $loader-grid-unit;
  }
}