ui-view-loading-bar {
  position: fixed;
  z-index: $view-loading-bar-z-index;
  top: 0;
  left: 0;
  right: 0;
  > .ui-view-loading-bar {
    left: 0;
    top: 0;
    background-image: linear-gradient(to right, lighten($color-primary, 20), $color-primary);
    height: 2px;
    transition: width .3s;
    float: left;
    > .ui-view-loading-bar-shadow {
      float: right;
      height: 100%;
      width: 100px;
      border-radius: inherit;
      animation: view-loading-bar-shadow 3s infinite;
    }
  }
}

@keyframes view-loading-bar-shadow {
  $shadow-color: hsla(hue($color-primary), saturation($color-primary), lightness($color-primary), .4);
  0% {
    box-shadow: 0 0 0 $shadow-color;
  }
  50% {
    box-shadow: 0 0 30px $shadow-color;
  }
  100% {
    box-shadow: 0 0 0 $shadow-color;
  }
}