$color_blue: #1663c7;
$color_blue_light: #2980b9;
$height: 2em;
$width: 10em;
/* *********************************************************************** */

.loader {
  position: relative;
  width: $width;
  height: $height;
  border: 1px solid $color_blue_light;
  border-radius: 3px;
  padding: 0;
  overflow: hidden;
}

.loader-complete span {
  display: block;
  position: absolute;
  text-shadow: 0px -1px 0px #FFF, 0px 1px 0px #000;
  left: 0;
  top:0;
  height: 100%;
  background: $color_blue;
  overflow: hidden;
}

.loader-incremental {
  background-image:
    repeating-linear-gradient(
      -45deg,
      $color_blue_light,
      $color_blue_light 11px,
      #eee 10px,
      #eee 20px /* determines size */
    );
  background-size: 28px 28px;
  animation: move .5s linear infinite;
}

@keyframes move {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 28px 0;
  }
}