$progress-height: 4px;
$progress-buffer-color: $color-controlelement;
$progress-color: $color-primary;

.linear-progress {
  position: relative;
  display: block;
  height: $progress-height;
  width: 100%;
  overflow: hidden;
  transform: translateZ(0);

  .progress-buffer {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: $progress-buffer-color;
  }

  .progress {
    position: absolute;
    width: 100%;
    height: 100%;
    background: $progress-color;
  }
  .progress--primary {
    animation: progressLinearMovement 2.5s infinite;
    animation-delay: 0s;
  }
  .progress--secondary {
    left: -100%;
    animation: progressLinearMovement 2.5s infinite;
    animation-delay: 1s;
  }
}

@keyframes progressLinearMovement {
  0% {
    left: -100%;
  }
  50% {
    left: 100%;
  }
  100% {
    left: 100%;
  }
}

//
//.loader-backdrop {
//  cursor: progress;
//}
//
//.linear-progress {
//  position: relative;
//  display: block;
//  height: $progress-height;
//  width: 100%;
//  overflow: hidden;
//  transform: translateZ(0);
//
//  .progress-buffer {
//    position: absolute;
//    width: 100%;
//    height: 100%;
//    background-color: $color-controlelement;
//  }
//
//  .progress,
//  .progress-inner {
//    position: absolute;
//    width: 100%;
//    height: 100%;
//  }
//  .progress-inner {
//    display: inline-block;
//    border-top: $progress-height solid $progress-color;
//  }
//  .progress--primary {
//    transform-origin: top left;
//    left: -145.166611%;
//    transform: scaleX(0);
//    animation: progress-primary-translate 2s infinite linear;
//    .progress-inner {
//      animation: progress-primary-scale 2s infinite linear;
//    }
//  }
//
//  .progress--secondary {
//    transform-origin: top left;
//    left: -54.888891%;
//    animation: progress-secondary-translate 2s infinite linear;
//    .progress-inner {
//      animation: progress-secondary-scale 2s infinite linear;
//    }
//  }
//}
//
//@keyframes progress-primary-translate {
//  0% {
//    transform: translateX(0);
//  }
//
//  20% {
//    animation-timing-function: cubic-bezier(.5, 0, .701732, .495819);
//    transform: translateX(0);
//  }
//
//  59.15% {
//    animation-timing-function: cubic-bezier(.302435, .381352, .55, .956352);
//    transform: translateX(83.67142%);
//  }
//
//  100% {
//    transform: translateX(200.611057%);
//  }
//}
//
//@keyframes progress-primary-scale {
//  0% {
//    transform: scaleX(.08);
//  }
//
//  36.65% {
//    animation-timing-function: cubic-bezier(.334731, .12482, .785844, 1);
//    transform: scaleX(.08);
//  }
//
//  69.15% {
//    animation-timing-function: cubic-bezier(.06, .11, .6, 1);
//    transform: scaleX(.661479);
//  }
//
//  100% {
//    transform: scaleX(.08);
//  }
//}
//
//@keyframes progress-secondary-translate {
//  0% {
//    animation-timing-function: cubic-bezier(.15, 0, .515058, .409685);
//    transform: translateX(0);
//  }
//
//  25% {
//    animation-timing-function: cubic-bezier(.31033, .284058, .8, .733712);
//    transform: translateX(37.651913%);
//  }
//
//  48.35% {
//    animation-timing-function: cubic-bezier(.4, .627035, .6, .902026);
//    transform: translateX(84.386165%);
//  }
//
//  100% {
//    transform: translateX(160.277782%);
//  }
//}
//
//@keyframes progress-secondary-scale {
//  0% {
//    animation-timing-function: cubic-bezier(.205028, .057051, .57661, .453971);
//    transform: scaleX(.08);
//  }
//
//  19.15% {
//    animation-timing-function: cubic-bezier(.152313, .196432, .648374, 1.004315);
//    transform: scaleX(.457104);
//  }
//
//  44.15% {
//    animation-timing-function: cubic-bezier(.257759, -.003163, .211762, 1.38179);
//    transform: scaleX(.72796);
//  }
//
//  100% {
//    transform: scaleX(.08);
//  }
//}