@import "~ui/styles/variables";

@loadingIndicatorBackgroundSize: 400px;
@loadingIndicatorHeight: 2px;
@loadingIndicatorColor1: @kibanaPink1;
@loadingIndicatorColor2: @kibanaPink2;

/**
 * 1. Position this loader on top of the content.
 * 2. Make sure indicator isn't wider than the screen.
 */
.loadingIndicator {
  position: fixed; // 1
  top: 0; // 1
  left: 0; // 1
  right: 0; // 1
  z-index: 20; // 1
  overflow: hidden; // 2
  height: @loadingIndicatorHeight;

  &.hidden {
    visibility: hidden;
    opacity: 0;
    transition-delay: 0.25s;
  }
}

  .loadingIndicator__bar {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
    z-index: 21;
    visibility: visible;
    display: block;
    animation: animate-loading-indicator 2s linear infinite;
    background-color: @kibanaPink2;
    background-image: linear-gradient(to right,
      @loadingIndicatorColor1 0%,
      @loadingIndicatorColor1 50%,
      @loadingIndicatorColor2 50%,
      @loadingIndicatorColor2 100%
      );
    background-repeat: repeat-x;
    background-size: @loadingIndicatorBackgroundSize @loadingIndicatorBackgroundSize;
    width: 200%;
  }

  @keyframes animate-loading-indicator {
    from { transform: translateX(0); }
    to { transform: translateX(-@loadingIndicatorBackgroundSize); }
  }
