@height: 8px;

@-webkit-keyframes animate {
  0% {
    -webkit-transform: translate(-25%);
  }
  100% {
    -webkit-transform: translate(25%);
  }
}

progress {
  -webkit-appearance: none;
  max-height: @height;
  box-sizing: border-box;
  border: 1px solid @stroke;
  position: relative;
  overflow: hidden;
  border-radius: @height;
  background-clip: padding-box;

  &::-webkit-progress-bar {
    background: #fff;
  }
  &::-webkit-progress-value {
    background-color: @ui-accent;
    box-shadow: inset 0 0 2px @ui-accent;
  }

  &:not([value]) {
    &::-webkit-progress-bar {
      background: mix(@ui-accent, #fff, 50%);
    }
    &::after {
      content:'';
      display: block;
      position: absolute;
      left: 25%;
      top: 0;
      width: 50%;
      height: 100%;
      background: @ui-accent;
      z-index: 1;
      background: radial-gradient(circle, @ui-accent, mix(@ui-accent, #fff, 50%));
      transform: translate(0);
      -webkit-animation: animate 3s alternate ease-in-out 7; // stop animation after 7 runs (21s) to limit CPU usage
    }
  }
}
