.bz-progress-bar {
  background-clip: padding-box;
  background-color: $bz-theme-100;
  height: 2px;
  left: 0;
  overflow: hidden;
  position: relative;
  right: 0;
  z-index: 20;
}

.bz-progress-bar__indeterminate {
  background-color: $bz-theme-400;

  &::before {
    -webkit-animation: indeterminate 2.1s cubic-bezier(.65, .815, .735, .395) infinite;
    animation: indeterminate 2.1s cubic-bezier(.65, .815, .735, .395) infinite;
    background-color: inherit;
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    top: 0;
    will-change: left, right;
  }

  &::after {
    -webkit-animation: indeterminate-short 2.1s cubic-bezier(.165, .84, .44, 1) infinite;
    -webkit-animation-delay: 1.15s;
    animation: indeterminate-short 2.1s cubic-bezier(.165, .84, .44, 1) infinite;
    animation-delay: 1.15s;
    background-color: inherit;
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    top: 0;
    will-change: left, right;
  }
}

@keyframes indeterminate {
  0% {
    left: -35%;
    right: 100%;
  }

  60% {
    left: 100%;
    right: -90%;
  }

  100% {
    left: 100%;
    right: -90%;
  }
}

@keyframes indeterminate-short {
  0% {
    left: -200%;
    right: 100%;
  }

  60% {
    left: 107%;
    right: -8%;
  }

  100% {
    left: 107%;
    right: -8%;
  }
}