.progressbar {
  height: 3px;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  overflow: hidden;
  z-index: 1;
  background-color: rgba($themeColor, 0.3);

  .progress {
    width: auto;
    will-change: left, right;
    top: 0;
    left: 0;
    bottom: 0;
    position: absolute;
    transition: transform 0.2s linear;
    transform-origin: left;

    &.item-1 {
      animation: progress-move1 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
    }

    &.item-2 {
      animation: progress-move2 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;;
      animation-delay: 1.15s;
    }

    &.blue {
      background-color: $themeColor;
    }
  }
}
@keyframes progress-move1 {
  0% {
    left: -35%;
    right: 100%;
  }

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

  100% {
    left: 100%;
    right: -90%;
  }
}
@keyframes progress-move2 {
  0% {
    left: -200%;
    right: 100%;
  }

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

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