进度条

<div class="progress-bar">
  <div class="progress-value">

   </div>
 </div>

.progress-bar {
  width: 600px;
  height: 20px;
  border-radius: 5px;
  border: 1px solid #ccc;
  background: #ddd;
  margin: 50px auto;
}

.progress-value {
   height: 20px;
   width: 400px;
   background: repeating-linear-gradient(45deg, #9CF 0px, #9CF 15px, #09C 15px, #09C 30px);
   background-size: 42px 20px;
   /* background-repeat: no-repeat; */
   /* background-position: 0px; */
   animation: progress-striped 1s linear 0s infinite;
}

@keyframes progress-striped {
  from {
    background-position: 42px 0px;
  }

  to {
    background-position: 0px 0px;
  }
}

效果图