Css实现滚动的进度条效果

实现效果

实现代码

.progress {
    width: 500px;
    height: 50px;
    background-size: 50px 50px;
    background-image: linear-gradient(
      -45deg,
      rgb(45, 167, 29) 25%,
      rgba(255, 255, 255, 0) 0,
      rgba(255, 255, 255, 0) 50%,
      rgb(45, 167, 29) 0,
      rgb(45, 167, 29) 75%,
      rgba(255, 255, 255, 0) 0
    );
    animation: back-animation 10s infinite linear;
    @keyframes back-animation {
      from {
        background-position-x: 0px;
      }
      to {
        background-position-x: 600px;
      }
    }
  }