.vs-progress--indeterminate
  position: absolute;
  width: 0;
  height: 100%;
  left: -100%;
  top: 0;
  animation: indeterminate 1.200s ease infinite;
  border-radius: 20px;

@keyframes indeterminate {
  0% {
    width: 30%;
    left: -40%;
  }
  60% {
    left: 100%;
    width: 100%;
  }
  100% {
    left: 100%;
    width: 0;
  }
}

.vs-progress--background
  width: 100%;
  border-radius: 18px;
  background-color: rgba(0, 0, 0, .06)
  z-index: 50;
  position: relative;
  display: inline-block;
  overflow: hidden;

.vs-progress--foreground
  z-index: 100;
  height: 100%;
  border-radius: 18px;
  transition: all .5s ease;

for colorx, i in $vs-colors
  .vs-progress-{colorx}
    background: getColor(colorx, .1)

    .vs-progress--foreground, .vs-progress--indeterminate
      background: getColor(colorx, 1)