.hui-LoadingProgress {
  width: 100%;
  position: absolute;
  top: 64px;
  z-index: 10;
}

.hui-LoadingProgress__bar, .hui-LoadingProgress__bar--inProgress, .hui-LoadingProgress__bar--complete {
  height: 0%;
  background-color: $green;
}

.hui-LoadingProgress__bar {
  width: 0%;
  animation: hui-complete 1000ms ease;
}

.hui-LoadingProgress__bar--inProgress {
  animation: hui-progress 10000ms cubic-bezier(0.015, 0.780, 0.100, 1.005);
  width: 90%;
  height: $x-1;
}

@keyframes hui-progress {
  0% {
    height: $x-1;
    width: 0%;
  }
  1% {
    width: 0%;
    height: $x-1;
  }
  100% {
    width: 90%;
    height: $x-1;
  }
}

@keyframes hui-complete {
  0% {
    height: $x-1;
  }
  70% {
    width: 100%;
    height: $x-1;
  }
  100% {
    height: 0px;
    width: 100%;
  }
}